2

通过javascript更新后，我在内容可编辑div中保留插入符号位置时遇到困难。

我有一个带有 contenteditable 属性的 div。

<div id="form", contenteditable="true">
</div>

假设用户输入“培根太好了！我想要更多”，我更新了 div 中的 html，其中我用 span 包裹了某些单词。从上面的html，它会变成这样：

<div id="form", contenteditable="true">
   Bacon is so <span>good</span>! I want more!
</div>

我通过使用 jQuery 更新 html 来做到这一点......

$('#form').html(...here I put the updated html...)

然而，在此之后，插入符号（光标）返回到 div 的开头。我想将插入符号保持在与更新 div 之前相同的位置，以便用户继续输入而不会出现任何问题。

目前，我有以下代码：

在更新 div 之前，我首先保存插入符号位置。

if(window.getSelection) {
    window.savedRange = window.getSelection().getRangeAt(0);
} else if(document.selection) { 
   window.savedRange = document.selection.createRange();
}

然后我尝试通过

$('#form').get(0).focus();
if (window.savedRange != null) {
    if (window.getSelection) {

        var s = window.getSelection();

        if (s.rangeCount > 0) 
            s.removeAllRanges();

        s.addRange(window.savedRange);
    } else if (document.createRange) {
        window.getSelection().addRange(window.savedRange);
    } else if (document.selection) {
        window.savedRange.select();
    }
}

我需要保留插入符号，因为这一切都应该在用户打字时发生。上面的代码没有做任何事情。它仍然返回到 div 的开头。

4

0 回答 0