在contenteditable中插入一个span，然后用户无法在刚刚插入的span之后和之后继续

Question

• 代码目标：当用户按空格时，自动输入一个跨度，然后用户可以继续输入，

• 当我在开发工具中跟踪它们时，range.setEnd(lasttextnode, 0);和 range.collapse() 以正确的方式运行，

• 但是键盘输入不正确，我在文本上设置了插入符号，想要在跨度之后插入字符，但是输入出现在刚刚插入的上一个跨度中。

这是我的代码：

editor.onkeydown = editinput;

var sel = window.getSelection();

function editinput(e) {

  var range = sel.getRangeAt(0);

  if (e.isComposing || e.keyCode === 229) { //imk

    return;

  }

  if (e.keyCode == 32) { //space

    var tnode = range.commonAncestorContainer;

    var start = range.startOffset;

    var text = tnode.textContent;

    var span = document.createElement('span');

    span.innerHTML = '------span------';

    var firsttextnode = document.createTextNode(text.substring(0, start));

    var lasttextnode = document.createTextNode(text.substring(start));

    var fragment = new DocumentFragment();

    fragment.append(firsttextnode, span, lasttextnode);

    tnode.replaceWith(fragment);

    range.setEnd(lasttextnode, 0); // here is problem,

    range.collapse();

    e.stopPropagation(); //bubble

    e.preventDefault(); //default.

  }

}

[contenteditable=true] {

  display: inline-block;

  white-space: pre-wrap;

  width: 400px;

  height: 100%;   

}

div, textarea,   span {

  border: 1px solid rgba(122, 206, 143, 0.966);

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

<div id="editor" contenteditable="true" class="Weave" tabIndex="1">

  samelinesamelinesamelinesamelinesamelinesamelinesame

  <span>deerge span</span>oaeueouaoeu <span>disange span</span>

</div>

您可以看到：键盘输入将在刚刚插入的范围内。

但是如果我将range.setEnd(lasttextnode, 0);更改为range.setEnd(lasttextnode, 1)，它将正确运行；

我尝试了很多方法：

1. 范围.collapse();

2. range.setStart(lasttextnode,0)

3. sel.removeAllRanges();

4. sel.collapse(lasttextnode,0)

5. range.setStartBefore(lasttextnode);

6. 范围.setStartAfter(span);

所有这些都不是工作。只需在lasttextnode之前插入一个空格就可以部分解决问题，但这不是我的目标，我想在span后面输入一些东西。

Answer 1

您可以尝试在跨度和最后一个文本节点之间插入一个空字符（例如 \u200B）。然后，当您将光标移动到最后一个文本节点之前时，它位于 span 标记之外。但请记住在将结果插入数据库之前删除结果中的空字符。editor.onkeydown = editinput;var sel = window.getSelection();function editinput(e) {&nbsp; var range = sel.getRangeAt(0);&nbsp; if (e.isComposing || e.keyCode === 229) { //imk&nbsp; &nbsp; return;&nbsp; }&nbsp; if (e.keyCode == 32) { //space&nbsp; &nbsp; var tnode = range.commonAncestorContainer;&nbsp; &nbsp; var start = range.startOffset;&nbsp; &nbsp; var text = tnode.textContent;&nbsp; &nbsp; var span = document.createElement('span');&nbsp; &nbsp; span.innerHTML = '------span------';&nbsp; &nbsp; var emptyNode = document.createTextNode('\u200B');&nbsp; &nbsp; var firsttextnode = document.createTextNode(text.substring(0, start));&nbsp; &nbsp; var lasttextnode = document.createTextNode(text.substring(start));&nbsp; &nbsp; var fragment = new DocumentFragment();&nbsp; &nbsp; fragment.append(firsttextnode, span, emptyNode, lasttextnode);&nbsp; &nbsp; tnode.replaceWith(fragment);&nbsp; &nbsp; range.setEnd(lasttextnode, 0); // here is problem,&nbsp; &nbsp; range.collapse();&nbsp; &nbsp; e.stopPropagation(); //bubble&nbsp; &nbsp; e.preventDefault(); //default.&nbsp; }}[contenteditable=true] {&nbsp; display: inline-block;&nbsp; white-space: pre-wrap;&nbsp; width: 400px;&nbsp; height: 100%;&nbsp; &nbsp;}div, textarea,&nbsp; &nbsp;span {&nbsp; border: 1px solid rgba(122, 206, 143, 0.966);&nbsp; margin: 0;&nbsp; padding: 0;&nbsp; box-sizing: border-box;}<div id="editor" contenteditable="true" class="Weave" tabIndex="1">&nbsp; samelinesamelinesamelinesamelinesamelinesamelinesame&nbsp; <span>deerge span</span>oaeueouaoeu <span>disange span</span></div>

Answer 2

您可以尝试添加另一个节点，只需一个空格，然后在该节点上 setEnd 。var firsttextnode = document.createTextNode(text.substring(0, start));var lasttextnode = document.createTextNode(text.substring(start));var emptyNode = document.createTextNode(' ');var fragment = new DocumentFragment();fragment.append(firsttextnode, span, lasttextnode, emptyNode);tnode.replaceWith(fragment);range.setEnd(emptyNode, 1);range.collapse();https://jsfiddle.net/63s1tgyw/它将聚焦在跨度之外。这是您想要实现的目标吗？