javascript - 尝试将空跨度添加到 contenteditable div 时左右按钮行为异常

Question

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

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

现在，我可以在 contenteditable div 中获得 care 位置，而且我知道如何在插入位置删除和添加 span 元素。

但问题是，当我执行此操作时，向左和向右按钮出现异常。

请看这个 link

    _result.remove('.spanPos'); //removing
    var text = _fullText.slice(0, _caretPos) + _spanElem + _fullText.slice(_caretPos);
    _result.html(text);  //adding at new position

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

有什么办法解决这个问题吗？

我正在寻找适用于 IE8+ 和 firefox(chrome 是可选的)的解决方案。

Answer 1

我弄清楚了问题并修复了左右的错误行为，这是更新的 fiddle http://jsfiddle.net/2PS3m/5/包含修复。

发生的事情是:

在您的 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中获取代码http://jsfiddle.net/2PS3m/5/ 尝试一下，告诉我它是否适合你，我对它的测试表明它按预期工作，开始时没有光标跳转。