window.getSelection() 如何在 contenteditable javascript 中获取当前节点

Question

我有这个函数可以在 contenteditable 的第一行内正确移动插入符，尽管它只查看 childNodes[0]，因此它不会在第二行内移动插入符。

function setcaret(item, pos) {
  var range = document.createRange();
  var sel = window.getSelection();

  range.setStart(item.childNodes[0], pos);
  range.collapse(false);
  sel.removeAllRanges();
  sel.addRange(range);
  item.focus();
}

setcaret(divid, 4); //move caret four places in current line

我需要修改它以获取当前节点，以便它适用于 contenteditable 内的多个 div，就像插入符号在第二个节点内一样

<div contenteditable="true"><div>first child</div><div>second |child</div>

有什么想法吗？

Answer 1

不幸的是，这并不容易......

为此，我们必须自己确定给定索引处的字符属于哪个节点。为此，我们需要遍历容器的子节点。

这个操作可以通过TreeWalker 大大简化，设置为只迭代TextNodes：

// this method will allow us to get the TextNode at character index
function getNodeAtCharPos(parent, pos) {
  var walker = document.createTreeWalker(parent, NodeFilter.SHOW_TEXT);
  var chars = 0;
  var nodeLength = 0;
  while (chars < pos && walker.nextNode()) {
    nodeLength = walker.currentNode.textContent.length;
    chars += nodeLength;
  }
  return {
    node: walker.currentNode,
    index: Math.min(pos - (chars - nodeLength), nodeLength)
  };
}

function setcaret(item, pos) {
  if (pos < 0) return;
  var nodeAtPos = getNodeAtCharPos(item, pos);
  var range = document.createRange();
  var sel = window.getSelection();
  range.setStart(nodeAtPos.node, nodeAtPos.index);
  sel.removeAllRanges();
  sel.addRange(range);
}
var divid = document.getElementById('divid');
btn.onclick = e => setcaret(divid, inp.value);

<div id="divid" contenteditable="true"><div>first child</div><div>second child</div></div>

<br><label>Offset: <input id="inp" type="number" value="4" min="0"><button id="btn">set caret</button></label>