在元素之后设置光标答案

【问题标题】：Set Cursor After an element在元素之后设置光标
【发布时间】：2016-12-10 14:23:35
【问题描述】：

我有这个代码

elementSpan = document.createElement('span').className = 'mainSpan';
elementSpan.innerHTML = '<span class="childSpan">A</sapn>';
range.insertNode(elementSpan);
range.setStartAfter(elementSpan);  //the problem am having

现在我将光标设置在 elementSpan 之后，在将其插入到 contenteditable div 之后，而不是将光标设置在 elementSpan 之后，而是在 <span class="childSpan"> 内的文本 A 之后但我希望它在elementSpan 之后。请任何有线索的人知道如何做到这一点？

【问题讨论】：

标签： javascript cursor contenteditable

【解决方案1】：

再次检查了您的问题，这是我最接近工作的地方。这会在末尾创建一个带有&nbsp; 的虚拟a，并将光标移过它。 a 和 &nbsp; 都很重要，因为没有这些浏览器（Safari、Chrome）会由于一些优化而强制输入的文本进入最后一个元素。代码将光标移动到下一个元素，如果已经有一个元素，可以通过删除if来删除它。

我不是范围/选择 API 方面的专家。期待看到其他有趣的答案。

elementSpan = document.createElement('span');
elementSpan.className = 'mainSpan';
document.getElementById('ce').appendChild(elementSpan);
elementSpan.innerHTML = '<span id="childSpan">Another text</span>'; //the problem am having
setCursorAfterElement(document.getElementById('childSpan'));

function setCursorAfterElement(ele) {
  if (!ele.nextElementSibling) {
    var dummyElement = document.createElement('a')
    dummyElement.appendChild(document.createTextNode('\u00A0'))
    ele.parentNode.appendChild(dummyElement)
  }
  var nextElement = ele.nextElementSibling
  nextElement.tabIndex=0
  nextElement.focus()
  var r = document.createRange();
  r.setStart(nextElement.childNodes[0], 1);
  r.setEnd(nextElement.childNodes[0], 1);

  var s = window.getSelection();
  s.removeAllRanges();
  s.addRange(r);
  //document.execCommand("delete", false, null);
}

#childSpan {
  border: 1px solid red;
  margin: 0px;
}

<div id="ce" contenteditable="true">
</div>

【讨论】：

仍然给我同样的结果
有没有办法在添加标签后删除光标在跨度之外添加文本。