Search code examples
javascriptinternet-explorercross-browsermootoolscontenteditable

Setting contenteditable on double click - IE does not allow editing unless clicked one more time

Basically, I set contentEditable to true on double click. In IE 8,9,10 it does not have focus, e.g. typing to not change anything, and you have to click third time to acquire the focus. In Chrome it works as expected (you double click and can start typing) Here is the minimal jsfiddle demonstrating the problem (using mootools).

$('dummy').addEvent('dblclick', function(){
    $('dummy').setProperty('contentEditable', true);
    $('dummy').focus();
});

If it's on any importance, the clicked element is an absolutely positioned div.

How this can be fixed?

Solution

  • IE is... IE.

    Try this:

    $('dummy').addEvent('dblclick', function () {
    this.setProperty('contentEditable', true);
    this.blur();
    this.focus();
});

    Fiddle