0

我需要将文本插入到 contenteditable div 中，然后将光标置于插入文本的末尾。

我从here Insert text at cursor in a content editable div得到了下面的解决方案。

如果将文本添加到空 div，那效果很好。但是如果用户已经输入了文本，它就不起作用了。或者，如果该函数用于插入文本，则用户将光标放在新文本内的某个位置，然后再次调用该函数。然后光标留在插入文本的开头。

编辑：下面的代码在 IE 中工作，正确设置光标，但在 Chrome 中有问题。

function insertTextAtCursor(text) {
    var sel, range, html;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            range.insertNode( document.createTextNode(text) );
        }
    } else if (document.selection && document.selection.createRange) {
        document.selection.createRange().text = text;
    }
}
4

1 回答 1

1

好吧，一旦我意识到这是一个 Chrome/IE 的东西，我设法在我第一次找到的答案的一个评论中找到了答案。

function insertTextAtCursor(text) { 
    var sel, range, html; 
    sel = window.getSelection();
    range = sel.getRangeAt(0); 
    range.deleteContents(); 
    var textNode = document.createTextNode(text);
    range.insertNode(textNode);
    range.setStartAfter(textNode);
    sel.removeAllRanges();
    sel.addRange(range);        
}
于 2013-05-17T05:32:36.410 回答