contenteditable 将插入符号放在插入的范围之外答案

【问题标题】：contenteditable put caret outside inserted spancontenteditable 将插入符号放在插入的范围之外
【发布时间】：2014-03-01 17:21:10
【问题描述】：

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

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

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

查找节点的代码：

  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) 设置边界。我是这个领域的新手，所以我不确定我的延伸是正确的。因此，任何建议都是非常值得赞赏的。提前致谢。

【问题讨论】：

标签： javascript jquery html nodes contenteditable

【解决方案1】：

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

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

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

作为背景，以下是相关问题/答案的列表：

我需要一个常见的答案，它经常出现......

【讨论】：

我使用了这个方法但是无法摆脱unicode字符！但我想通了。在您的内容上使用一些正则表达式（通过 getContent 和 setContent）来替换“”。但这是诀窍，除非您像这样使用 getContent，否则这些不会显示：getContent({format: 'numeric'});
零宽度字符应该在它自己的元素中，还是在另一个元素之后作为文本节点。
@QuentinEngles：我认为这不重要。将零宽度空间放在其自己的元素中以进行清理可能会很方便。
@TimDown 我认为这就是我将使用它的目的（清理）。现在，箭头键、删除和退格键也必须使用零宽度字符进行双重输入。所以我正在努力弄清楚如何摆脱它。
@QuentinEngles：祝你好运。在一个项目中，我最终完全放弃了 contenteditable 并绘制了我自己的选择和插入符号，同时实现了箭头键、删除、双击等的自定义处理。花了很长时间但工作正常，虽然在触摸设备上不太好。

【解决方案2】：

这是一个旧帖子，这是解决问题的一部分。我还没有完成更复杂的方法，但简单总是好的。

const editor = document.querySelector('[contenteditable="true"]');
const spans = document.querySelectorAll('span[contenteditable="false"]');

Array.prototype.slice.call(spans).map(span => {
  const empty = document.createTextNode( '\uFEFF' );
  const parentEl = span.parentElement;
  const allchildnodes = editor.childNodes;
  const lastsib = allchildnodes[allchildnodes.length - 1];
  const ended = lastsib.wholeText === '\n';
  const prevsib = ended ? lastsib.previousSibling === span : false;
  if (prevsib) {
    parentEl.appendChild(empty);
  }
});

https://codepen.io/augur/pen/MvaKJO

【讨论】：