如何精确控制 Contenteditable Div 中的插入符位置？

Contenteditable 元素中的插入符位置

为了操纵 contenteditable div 中的插入符位置，已经进行了许多尝试来利用 Range 和选择对象取得了不同程度的成功。然而，最近的努力发现了设置光标位置的精确方法：

将插入符设置为特定字符

在 Firefox 和 Chrome 等浏览器中，所需的结果可以可以通过使用以下代码来实现：

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)
}

在此代码中，光标位于第二个的第五个字符处contenteditable div 中 ID 为“editable”的文本行。这是通过指定目标节点 (el.childNodes[2]) 以及该节点内范围起点和终点的偏移位置 (5) 来完成的。

细化位置

为了获得最大精度，可以在代码中包含额外的节点和偏移量，以将光标的位置缩小到嵌套元素内甚至特定的特定字符内 单词。这种级别的控制允许在复杂的 HTML 结构中进行无缝的光标操作。

以上是如何精确控制 Contenteditable Div 中的插入符位置？的详细内容。更多信息请关注PHP中文网其他相关文章！