gpt4 book ai didi

javascript - 在包含标签的 contenteditable div 中获取插入符号索引

转载 作者:太空狗 更新时间:2023-10-29 13:19:31 30 4
gpt4 key购买 nike

我有一个 contentEditable div,其中有多个标签(brb u, i) 和文本。

我需要获取相对于 div 的插入符索引位置,包括所有标签。

例如:

<div id="h" contenteditable="true">abc<b>def<br>ghi</b>jkl</div>

如果光标在 gh 之间,我需要插入符索引位置为 14。问题是找到的方法使用 treeWalker在这种情况下不起作用。未找到粗体标记...可能是因为它未关闭。我也尝试了几种方法,但仍然没有成功。

我需要它在 Firefox 中工作。谢谢。

最佳答案

你试过吗? Get a range's start and end offset's relative to its parent container

直接链接到 jsfiddle: https://jsfiddle.net/TjXEG/1/

函数代码:

function getCaretCharacterOffsetWithin(element) {
var caretOffset = 0;
if (typeof window.getSelection != "undefined") {
var range = window.getSelection().getRangeAt(0);
var preCaretRange = range.cloneRange();
preCaretRange.selectNodeContents(element);
preCaretRange.setEnd(range.endContainer, range.endOffset);
caretOffset = preCaretRange.toString().length;
} else if (typeof document.selection != "undefined" && document.selection.type != "Control") {
var textRange = document.selection.createRange();
var preCaretTextRange = document.body.createTextRange();
preCaretTextRange.moveToElementText(element);
preCaretTextRange.setEndPoint("EndToEnd", textRange);
caretOffset = preCaretTextRange.text.length;
}
return caretOffset;
}

function showCaretPos() {
var el = document.getElementById("test");
var caretPosEl = document.getElementById("caretPos");
caretPosEl.innerHTML = "Caret position: " + getCaretCharacterOffsetWithin(el);
}

document.body.onkeyup = showCaretPos;
document.body.onmouseup = showCaretPos;

关于javascript - 在包含标签的 contenteditable div 中获取插入符号索引,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16736680/

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