contenteditable把插入外插入插入符号

Question

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

请看一下这个链接.因为它清除了它将在插入符号位置插入一个span节点.问题是,插入节点后,如果我按任何字符,其颜色也是绿色.因为它也是在span元素内部.那么如何在插入后放置插入符号以使下一个插入节点的颜色保持正常.

我试图找到所选节点(基于插入位置),在元素后面设置范围并使用折叠(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在插入的<span>元素后插入零宽度空格字符(Unicode ).除了是一个非常丑陋的黑客之外,这确实存在一旦不再需要就跟踪和移除这些零宽度空间的问题.

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

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

有关背景信息,请参阅以下相关问题/答案列表:

• 将插入符号位置设置为contentEditable元素内的空节点
• /sf/answers/1107000821/
• 将插入符号放在ContentEditable中插入标记之外
• 将插入符号位置设置为contentEditable元素内的空节点

我需要一个库存答案,它经常出现......