删除内容可编辑 div 中的元素时如何防止插入符号错位

Question

当用户在评论框中输入内容时，我的应用程序包含一个预先输入功能。以与 Facebook 和 google+ 类似的方式，它将执行用户查找并即时建议他们作为标签。

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

我决定为此使用可竞争的 div，但遇到了一些问题。

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

为了解决这个问题，我将插入的“用户”标签设置为 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 会为您规范化此事件属性。