gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 01:27:56 56 4
gpt4 key购买 nike

我有这个函数,可以在 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/

56 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com