Javascript 尝试向contenteditable div添加空范围时，左键和右键行为不正常

在我的项目中，我试图在contenteditable div中插入符号的任何位置添加一个跨距。此跨距元素将用于间接获取插入符号的偏移位置

var _spanElem = "<span class='spanPos'></span>";

按右键时，跨度元素将成功删除并添加到新的插入符号位置，但按左键时，插入符号将移动到初始位置，而不是下一个位置

有什么办法吗

---

我正在寻找一种适用于IE8+和firefox（chrome是可选的）的解决方案。

我解决了这个问题，并修复了左右两侧的错误行为，下面是更新后的fiddle，其中包括修复程序

发生的情况是：

在setAutoCompletePos（）函数中，实际上是完全替换了_result元素的内容（_result.html（text）；），这使得它失去了选择，并在开始时跳转

看似不正常的按键，实际上是丢失了原始文本+选择/插入符号位置

解决方法是在更改元素内容后执行restoreSelection（），这实际上会将插入符号设置回原来的位置

我还将keydown改为keyup，并在元素中添加了mouseup事件，以便在发生任何事情之前保存初始选择

对于这样的操作，最好使用keyup事件而不是keydown，以允许插入符号在执行所需操作之前更改位置

mouseup事件主要用于捕获用户在文本中的单击，并将插入符号的初始位置存储在我在代码中添加的变量中

因此，您的setAutoCompletePos函数如下所示，并按预期工作：

function setAutoCompletePos() {
    var offsetPos;
    _result.remove('.spanPos');
    var text = _fullText.slice(0, _caretPos) + _spanElem + _fullText.slice(_caretPos);
    _result.html(text);
    restoreSelection(_result.get(0), _savedSel); //added this
    offsetPos = $('.spanPos').offset();
}

---

从修改过的fiddle中获取代码尝试一下，告诉我它是否对您有效，我对它的测试表明，它可以按预期工作，而不会在开始时跳转光标。

我会看一看，然后告诉您。感谢您的回复：）

function setAutoCompletePos() {
    var offsetPos;
    _result.remove('.spanPos');
    var text = _fullText.slice(0, _caretPos) + _spanElem + _fullText.slice(_caretPos);
    _result.html(text);
    restoreSelection(_result.get(0), _savedSel); //added this
    offsetPos = $('.spanPos').offset();
}