首页 > web前端 > js教程 > 如何精确控制 Contenteditable Div 中的插入符位置?

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

Susan Sarandon
发布: 2024-12-11 05:05:13
原创
349 人浏览过

How Can I Precisely Control Caret Position in a 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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板