javascript - contenteditable 将插入符放在插入的跨度之外

Question

http://jsfiddle.net/VzbYJ/86/

请查看此链接。因为它清楚它将要在插入位置插入一个跨度节点。问题是，插入后如果我按下任何字符，该节点的颜色也是绿色的。因为它也进入了 span 元素。那么我怎样才能把插入符号在跨度之后，以便下一个插入节点的颜色保持正常。

我试图找到选定的节点(基于插入符号位置)，在元素之后设置范围并使用 collapse(false)。但我无法获得所需的输出。

查找节点的代码:

  function findNode(event)
  {
    if (event.type == 'click')
    par = event.target;

    else if (event.type == 'keyup'){        
        if (document.selection)
        par = document.selection.createRange().parentElement();
    else if (window.getSelection){
        var range = window.getSelection().getRangeAt(0);
        par = range.commonAncestorContainer.parentNode;
    }
  }

然后我使用 setEndAfter() ant collapse(false) 设置边界。我是这个领域的新手，所以我不确定我是对的。所以任何建议都非常值得赞赏。提前致谢。

Answer 1

快速查看此页面上的“相关”部分将为您提供指向所有所需信息的链接。总之，浏览器(除非是 Firefox)会阻止它，最简单的解决方法是在插入的 U+200B 之后插入一个零宽度空格字符 (Unicode <span>)元素。除了是一个非常丑陋的 hack 之外，这确实存在跟踪和删除这些零宽度空间的问题，一旦它们不再需要。

我已经更新了您的 jsFiddle 以使用这种方法，但没有任何代码来删除零宽度空格:

http://jsfiddle.net/VzbYJ/87/

作为背景，这里是相关问题/答案的列表:

• Setting the caret position to an empty node inside a contentEditable element
• https://stackoverflow.com/a/15814297/96100
• Placing caret outside of inserted tag in ContentEditable
• Setting the caret position to an empty node inside a contentEditable element

我需要一个标准答案，它经常出现...