gpt4 book ai didi

javascript - 如何将插入符号设置为 contenteditable 中 Range 对象的最后一个字符?

转载 作者:行者123 更新时间:2023-12-02 18:02:06 24 4
gpt4 key购买 nike

我很难弄清楚如何根据 Range 对象中的最后一个字符设置插入符号位置。

例如,我有 contenteditable,其中包含一些文本。

Hello world Test

然后我用鼠标突出显示文本部分(“wor”):

enter image description here

然后 mouseup 事件将获取选定的范围。

焦点消失后,所选的突出显示将消失。

现在,我的目标是将插入符号设置在“r”和“l”之间,如下图所示(范围的末尾)

enter image description here

到目前为止,我已经完成了选择和恢复部分的工作,但无法根据 Range 对象找出插入符号设置。

代码:

var node = this.element.find(".reContentArea")[0];
var range = document.createRange();

var sel = window.getSelection();

sel.removeAllRanges();
sel.addRange(range);

最佳答案

您可以使用focusOffset来获取选择结束的字符位置:

$('.reContentArea').on('mouseup', function() {
var offset= window.getSelection().focusOffset
})

contenteditable 元素 上设置插入符号位置时,我们可以使用 setStart(startNode, startOffset) 。正如您在此方法中看到的,我们需要指定节点以及该节点内的偏移量。

var editable = $('.reContentArea')[0],
range = document.createRange(),
sel = window.getSelection();

range.setStart(editable.firstChild, offset);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);

我不清楚你想触发什么“将插入符号设置为”,但我已经用这个解决方案在这个jsfiddle上做了一个简单的点击事件。 .

关于javascript - 如何将插入符号设置为 contenteditable 中 Range 对象的最后一个字符?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20435854/

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