1

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

但是，为了保留光标位置，我<span id="placeholder"></span>在处理开始之前成功地将 a 插入到 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();
    }

}

任何帮助将不胜感激，跨浏览器解决方案将令人难以置信:)

4

1 回答 1

4

一个跨浏览器的解决方案是使用我的Rangy库，特别是选择保存/恢复模块，它使用类似的占位符技术并且经过了很好的测试。但是，这可以在不使用库的情况下通过在占位符元素中放置一些内容（例如，不间断空格（\u00A0或HTML 中））来解决。您可能希望在选择范围后&nbsp;删除占位符。focusOnPlaceholder()

于 2011-02-16T00:43:24.260 回答