在 contenteditable div 中的特定位置设置插入符号位置

Posted 2023-02-19

【中文标题】在 contenteditable div 中的特定位置设置插入符号位置

【英文标题】：Set caret position at a specific position in contenteditable div

【发布时间】：2014-07-29 17:34:54

【问题描述】：

在标记重复/否决之前查看

contenteditable div 将没有子元素 我不想将位置设置在 div 的末尾 我不想要跨浏览器解决方案，只需要 Chrome 支持 只有 vanilla JS，没有库。

我见过很多很多解决方案。许多由 Tim Down 和其他人撰写。但没有一个有效。我见过window.getSelection、.addRange 等，但看不到它们在这里是如何应用的。

这是jsfiddle。

（已尝试）代码：

var node = document.querySelector("div");
node.focus();
var caret = 10; // insert caret after the 10th character say
var range = document.createRange();
range.setStart(node, caret);
range.setEnd(node, caret);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);

【问题讨论】：

抱歉，您为什么需要以下行：在标记重复/否决投票之前查看？

@HappyCoding *** 上已经有很多关于在 contenteditable div 中设置光标位置的问题，但是，我的问题不同。因此，我写这行是为了警告仓促的否决者。

【参考方案1】：

您需要将插入符号放置在元素内的文本节点内，而不是元素本身。假设您的 html 看起来像 <div contenteditable="true">Some text</div>，使用元素的 firstChild 属性将获得文本节点。

更新了 jsFiddle：

http://jsfiddle.net/xgz6L/8/

代码：

var node = document.querySelector("div");
node.focus();
var textNode = node.firstChild;
var caret = 10; // insert caret after the 10th character say
var range = document.createRange();
range.setStart(textNode, caret);
range.setEnd(textNode, caret);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);

【讨论】：

好的，textareas 和 contenteditable div 有一个文本节点子节点，对吧？ contenteditable div 没有selectionStart 和selectionEnd 属性是否有特定原因？谢谢！

contenteditable 元素可以包含任意 HTML，包括 <br> 等元素和暗示但不包含空格字符的块元素。还有 CSS，它还可以隐藏 DOM 内容，甚至添加 DOM 中未表示的可见文本。因此，基于字符的偏移在 contenteditable 中很复杂。它们也不精确：元素可见文本中的同一点可能对应于 DOM 中的多个不同点。 DOM 范围是精确的。

感谢您的意见！

你能帮我再问一个问题吗？我正在使用与this fiddle 函数getCaretPosition 完全相同的代码。我尝试将元素参数设为原始div 和.firstChild。我一直在收到：“未捕获的 IndexSizeError：无法在 'Selection' 上执行 'getRangeAt'：0 不是有效索引。”我不想给你带来太多麻烦，但我已经浪费了超过 2 个小时。请帮我。非常感谢！

别担心！修复感谢：***.com/questions/22935320/…