0

したがって、ユーザーが div をダブルクリックすると、それを編集可能にして、ダブルクリックした場所にカーソルを設定したいと考えています。

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();
}

ご覧のとおり、IE の setTimeout を指定して focus() を呼び出していますが、それでも機能しません。他のすべてのブラウザーでは、編集可能な div 内にカーソルが表示されますが、IE (バージョン 8) では表示されません。何が起こっている ？

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

4

1 に答える 1

1

これはこのトリックを行うようです：

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();
};

重要なポイントは、IE の range.select() を呼び出すことです。range.collapse() は、他のブラウザーの range.collapseToStart() と同じことを行います。range.execCommand("unselect") はあなたが望むものではありません。

更新された jsFiddle: http://jsfiddle.net/QcKpr/16/

于 2012-05-13T16:25:55.573 に答える