可编辑div光标位置

本文介绍了在可编辑div中实现光标定位的技术,包括使用Window的getSelection API获取选区,通过getRangeAt获取range对象,以及如何利用startOffset和endOffset确定光标位置。还提到在不同浏览器中的兼容性,如兼容IE9+,谷歌和火狐。当div失去焦点时保存range对象,重新聚焦时使用removeAllRanges和addRange恢复之前的状态。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

参考:

https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection

https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt

https://developer.mozilla.org/en-US/docs/Web/API/Selection/addRange

MDN上提示这些API不稳定。应该是兼容IE9+,谷歌,火狐

1. var sel = window.getSelection()  变量sel是当前页面被选中区域

2. var objRange = sel.getRangeAt(0) 获得选中区域的range对象

   startOffset和endOffset代表了选中区域的起始位置和结束位置,相同时代表了光标位置

  anchorNode有2个值,一个是输入框节点,一个是文本text。

  anchorNode为输入框节点时,startOffset代表了在文本框中的位置,一段文字看成一个整体相当于只占一个位置,一个表情算一个位置。

3. objRange.rangeCount表示选中区域的range对象数量
4. sel.removeAllRanges()可以移除选中区域的range对象

5. document.createRange()可以创建新的range对象

6. sel.addRange(range)可以给选中区域添加range对象


基本思路:

当可编辑div失去焦点时,要记录当时的range对象,赋值给一个变量lastRange

当可编辑div重新获得焦点,会有一个默认range对象,startOffset和endOffset都为0

使用sel.removeAllRanges()可以移除选中区域的range对象

使用sel.addRange(lastRange)可以给选中区域添加当时保存的lastRange对象


别人家的详细解释和示例:https://segmentfault.com/a/1190000005869372


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值