如何以编程方式设置 ContentEditable 元素中的插入符位置？

在内容可编辑元素中设置插入符位置

在内容可编辑 div 中设置插入符位置可以使用 Range 和 Selection 对象来实现。以下是如何将插入符号设置到元素内的特定位置：

代码：

function setCaret() {
    var el = document.getElementById("editable")
    var range = document.createRange()
    var sel = window.getSelection()
    
    range.setStart(el.childNodes[2], 5)
    range.collapse(true)
    
    sel.removeAllRanges()
    sel.addRange(range)
}

说明：

• el 代表可内容编辑元素。
• range是用于指定插入符号的Range对象position.
• sel 是用于操作选择的 Selection 对象。
• setStart() 将范围的开始设置为指定节点和偏移量（el.childNodes[2] 和 5，分别）。
• collapse() 将范围折叠到开始时的单个点位置。
• removeAllRanges() 删除任何现有选择。
• addRange() 将创建的范围添加到选择中。

示例：

考虑以下 HTML：

<div>

当您单击“焦点”按钮，调用 JavaScript 函数 setCaret()，将插入符号放置在第二行文本的第五个字符处。

以上是如何以编程方式设置 ContentEditable 元素中的插入符位置？的详细内容。更多信息请关注PHP中文网其他相关文章！