Question

我具有此功能，尽管它仅查看childNodes [0]，所以它不会将插入符正确地移动到contenteditable的第一行中。

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

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

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

使用TreeWalker可以大大简化此操作，该操作设置为仅对TextNode进行迭代：

// 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>

window.getSelection（）如何获取内容可编辑javascript

1 个答案: