我有这个函数,可以在 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>
有什么想法吗?
最佳答案
不幸的是,这并不那么容易......
为此,我们必须自己确定给定索引处的字符属于哪个节点。为此,我们需要遍历容器的子节点。
使用 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>
关于javascript - window.getSelection() 如何获取 contenteditable javascript 中的当前节点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51434540/