如何以编程方式将插入符定位在内容可编辑元素中？

将插入符号放置在可内容编辑元素中的特定位置

处理可内容编辑元素时，能够设置光标（插入符号）到一个特定的位置可能是至关重要的。然而，实现这一目标可能并不简单。

在大多数 Web 浏览器中，利用 Range 和 Selection 对象是关键。通过将每个选择边界指定为节点以及该节点内的偏移量，您可以控制插入符号的位置。

为了说明这一点，请考虑一个带有 contenteditable div 的简单 HTML 示例：

<div>
<p>现在，假设您要将插入符号放置在第二行文本的第五个字符处。为此，请按照下列步骤操作：</p>
<ol>
<li>
<p><strong>创建范围对象：</strong></p>
<pre class="brush:php;toolbar:false">var range = document.createRange();

设置评选边界：

var myDiv = document.getElementById("editable");
range.setStart(myDiv.childNodes[2], 5);
range.collapse(true);

• myDiv.childNodes[2] 指第二行文本。
• range.setStart() 将选择范围的开始设置为该节点中的第五个字符。
• range.collapse(true) 将范围折叠为插入符号

设置选择：

var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);

• window.getSelection() 返回 Selection 对象。
• sel.removeAllRanges() 删除任何现有的选择。
• sel.addRange(range) 设置新的选择范围。

触发函数：
附加以上代码为点击事件按钮：

document.getElementById("button").addEventListener("click", setCaret);

通过执行以下步骤，您现在可以以编程方式设置可内容编辑元素中的插入符号位置。