如何在删除contenteditable div中的元素时防止插入错位

Question

我的应用程序包括用户在注释框中键入时的预先输入功能。 以与Facebook和谷歌+类似的方式，它将执行用户查找并将其作为标签即时显示。

当用户选择其中一个提供的标签时，它将作为元素输入到输入区域。

我决定使用一个conenteditable div，但遇到了一些问题。

事实证明，当firefox设置为contenteditable false而其他所有主要浏览器都没有时，它不会删除插入的元素。

为了解决这个问题，我将插入的'user'标签设置为contenteditble = true，并编写了一个快速的jquery解决方法来解决这个问题。

除了一个主要问题外，它完美地运作。 如果区域中有多个标签，并且第一个标签没有任何文本，则当用户删除最后一个标签时（假设从右到左删除退格键），插入符号在最终删除后会被错误定位。

再次键入然后将位置恢复正常。

此问题仅发生在Firefox中

这是一个显示问题的jsFiddle：

http://jsfiddle.net/gordyr/PESky/

将光标放在最后一个标记的末尾，然后按住退格键直到删除所有元素。 您将看到光标/插入符号向上移动并移出位置。

很可能这实际上是firefox本身的一个错误，但是我正在寻找某种解决方法，因为没有用javascript删除这个自动元素，根本不会被删除。

非常感谢

Answer 1

FF似乎留下了一些污垢，但您可以通过添加以下内容来清理它：

if (!$.trim(el.text())) {
    el.empty();
}

这将检查contenteditable的innerText是否仅包含空格或换行符/符号。 如果是，请将其清空。 似乎在我的测试中工作： http ： //jsfiddle.net/cBZ7k/

旁注 ：您应该使用keydown而不是keypress来支持webkit。 此外， e.which这足以获得keyCode，jQuery为您规范化此事件属性。