javascript element.focus() IE

Question

So when a user doubleclicks on a div I want to make it editable and set the cursor where he doubleclicked.

html :

<div id="mydiv" class="cmydiv" ondblclick="fEdit(this, event)">haha brouhaha beeee lololol</div>

javascript :

function fEdit(elem, e) {
    elem.contentEditable = "true";
    var range;
    if (document.selection) {
        range = window.document.selection.createRange();
        range.expand("word");
        range.execCommand("unselect");
    } else {
        range = window.getSelection();
        if (range.rangeCount > 0) range.collapseToStart();
    }
    setTimeout(function() { elem.focus(); }, 10);
    //elem.focus();
}

as you can see i call focus() with a setTimeout for IE, HOWEVER IT STILL DOESN'T WORK! In all other browsers I can see the cursor inside the div which is now editable, BUT NOT IN IE ( version 8 ). what is going on ?

jsfiddle : http://jsfiddle.net/QcKpr/12/

In IE8, I don't think `
` elements were allowed to receive focus. There might be a workaround though: http://www.barryvan.com.au/2009/01/onfocus-and-onblur-for-divs-in-fx/. The article says you should give your `
` a `tabIndex` attribute. — Cᴏʀʏ, May 13 '12 at 16:05
tabIndex would make sense, I think you need to do that for the canvas element to receive focus too — dougajmcdonald, May 13 '12 at 16:11
i tried setting tabindex to the div but still doesn't work on IE and it breaks the functionality in firefox, that is with a tabindex, the cursor is not anymore visible. jsfiddle : http://jsfiddle.net/QcKpr/15/ — MirrorMirror, May 13 '12 at 16:13
Strongly related to this question: http://stackoverflow.com/questions/1181700/set-cursor-position-on-contenteditable-div — Brilliand, May 13 '12 at 16:15
@Brilliand I don't care much about the exact position, I just want IE to display the cursor in the div after it becomes editable. In IE it does become editable but no cursor/focus AT ALL — MirrorMirror, May 13 '12 at 16:19
If you call range.select() (and drop range.expand() and range.execCommand()), then IE selects the current word. That's a start. — Brilliand, May 13 '12 at 16:21

score 1 · Accepted Answer · answered May 13 '12 at 16:25

This seems to do this trick:

function fEdit(elem, e) {
    elem.contentEditable = "true";
    var range;
    if (document.selection) {
        range = window.document.selection.createRange();
        range.collapse();
        range.select();
    } else {
        range = window.getSelection();
        if (range.rangeCount > 0) range.collapseToStart();
    }
    setTimeout(function() { elem.focus(); }, 10);
    //elem.focus();
};

The important point is to call range.select() for IE. range.collapse() does the same thing as range.collapseToStart() for other browsers. range.execCommand("unselect") is not what you want.

Updated jsFiddle: http://jsfiddle.net/QcKpr/16/

It's probably best to make this only run once, since otherwise the user can't double-click to select a word. Also, the border around the div should probably only appear (or at least, become visibly stronger) when the div becomes editable, so that the user has a visible clue that something has changed. Otherwise, the user may simply feel that double-clicking didn't work. — Brilliand, May 13 '12 at 16:30

javascript element.focus() IE

1 Answers1