当尝试向可满足内容的div添加空span时，左右键行为不正常

Question

在我的项目中，我试图在插入符号在可满足的div中添加一个span。此span元素将被用作间接获取插入符号的偏移位置。

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

现在，我可以在可满足的div中获得插入符号的位置，我也知道如何在插入符号位置删除和添加span元素。

但问题是，当我做这个操作，左和右按钮是错误的行为。

请查看链接

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

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

有什么解决办法吗?

我正在寻找一个解决方案，在IE8+和火狐(chrome是可选的)。

Answer 1

我找出了问题，我修复了行为不端的左和右，这里是更新的小提琴http://jsfiddle.net/2PS3m/5/与修复包括。

发生的事情是:

在setAutoCompletePos()函数中，您实际上完全替换了_result元素的内容(_result.html(text);)这使得它失去了选择并且在开始处跳跃

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

解决方案是在更改元素的内容后执行restoreresselection()，这实际上是将插入符号设置回原来的位置。

我还将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/获取代码，尝试它并告诉我它是否适合您，我对它的测试表明，它按预期工作，开始时没有光标跳转。