2

在我的项目中，我试图在可内容编辑 div 中插入符号的任何位置添加一个跨度。这个 span 元素将被用作间接获取插入符号的偏移位置。

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

现在，我可以在 contenteditable 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+ 和 firefox（chrome 是可选的）的解决方案。

4

1 回答 1

1

我发现了问题并修复了左右行为不端的问题，这是更新后的小提琴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();
}

从修改后的小提琴http://jsfiddle.net/2PS3m/5/获取代码尝试并告诉我它是否适合您，我对它的测试表明它按预期工作而光标在开始时没有跳跃。

于 2013-05-06T12:36:52.110 回答