如何在Firefox和旧IE版本的contenteditable div中设置插入位置

时间:2015-05-06 05:06:26

标签: javascript dom

我试图在一个可信的div中设置插入位置。以下代码适用于现代IE,Chrome和Safari,但在Firefox 36.0.4或旧版IE(9或更低版本)中不起作用。对于这个答案,可以安全地假设contenteditable div只包含文本(即除了单个文本节点之外没有子元素)。

请告诉我如何解决此问题,特别是对于Firefox。

谢谢。

HTML:

<div contenteditable id="d">12345</div>
<div contenteditable id="log"></div>

JavaScript的:

function moveCaret(d, position) {
    d.focus(); // This is included because in my application the div is already focused by the time the caret must be moved.
    if (window.getSelection && document.createRange) {
        var sel = window.getSelection();
        sel.removeAllRanges();
        var range = document.createRange();
        range.setStart(d.childNodes[0], position);
        range.setEnd(d.childNodes[0], position);
        sel.addRange(range);
        d.focus();
     } else if (document.selection && document.body.createTextRange) {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(d);
        textRange.select();
        d.focus();
    }
}

try {
    var position = 0;
    var d = document.getElementById("d");
    moveCaret(d, 3);
}catch(e) {
    document.getElementById("log").innerHTML += e.toString();
}

http://jsfiddle.net/bk7ade2r/

1 个答案:

答案 0 :(得分:0)

问题似乎是firefox无法将焦点放在一个可信的div上。