Question

我有一个contentEditable DIV，当用户按下一个键时，底层代码将被处理并被更新的代码替换。唉，这会导致光标位置丢失。

但是，为了保留光标位置，我在处理开始之前成功地将<span id="placeholder"></span>插入DIV中的正确位置。这保留了光标的预期位置，但现在我似乎无法设置范围来选择它。

以下是我目前的情况：

function focusOnPlaceholder() {

    var placeholder = document.getElementById('placeholder');

    if( !placeholder ) return;

    var sel, range;

    if (window.getSelection && document.createRange) {                    
        range = document.createRange();
        range.selectNodeContents(placeholder);
        range.collapse(true);
        sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (document.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(placeholder);
        range.select();
    }

}

任何帮助都将受到赞赏，跨浏览器的解决方案将是令人难以置信的：）

Answer 1

跨浏览器解决方案是使用我的Rangy库，特别是selection save/restore module，它使用类似的占位符技术并经过充分测试。但是，通过在占位符元素中放置一些内容（例如，HTML中的不间断空格（\u00A0或 ），可以在不使用库的情况下修复此问题。您可能希望删除选择范围后，focusOnPlaceholder()中的占位符。

将光标移动到contentEditable DIV中的占位符元素

1 个答案: