对于前端自定义光标位置的代码处理_前端自定义文本鼠标光标选中的位置-CSDN博客

本文链接：https://blog.csdn.net/qq_39639777/article/details/122360479

本文档探讨了在富文本编辑器中使用contenteditable属性时遇到的光标丢失问题，特别是在右移操作时。作者提出通过监听键盘事件，特别是keydown事件来捕获并处理右移键，以实现自定义光标位置。此外，还解决了富文本中间数据删除时的问题，将删除操作放在keyup事件中处理。文章提供了具体的代码示例和处理思路。

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

对于前端自定义光标样式处理

看另一个大佬的文档“写一个可插入自定义标签的 Textarea 组件”，里面遇到的问题的解决思路
需求问题：我的需求是在富文本里面控制左右移动，富文本是使用的 contenteditable="true"这个属性友善的支持了绝大多数浏览器，（-webkit-user-modify: read-write-plaintext-only !important;这个属性会在ie中失效）。遇到的问题现在是左移的时候正常，但是右移的时候出现光标丢失的问题。具体富文本的实现参考了大佬的代码（https://www.cnblogs.com/wisewrong/p/10191621.html），这个代码里面存在的两个问题，第一个就是这个光标右移丢失问题。

处理思路

	我这边处理思路主要放在键盘事件上

      keydown:按下键盘键
      keypress:紧接着keydown事件触发（只有按下字符键的时候触发）
      keyup:释放键盘键

所以我们只需要把键盘插入之前把右移这个按键用keydown捕获到然后我们阻止默认的事件把我们自定义的放进去就好了，下面是自定义光标位置的代码（原理把原来的位置+1）

 offKeyDown (e) {
        // 创建一个自定义的位置
        let range = document.createRange()
        range.selectNodeContents(document.getElementById(this.contentId))
        range.collapse(false)
        // 获取原来光标的位置
        let sel = window.getSelection()
        // 把原来数据里面的位置改变
        range.setStart(document.getElementById(this.contentId),sel.getRangeAt(0).startOffset + 1)
        range.setEnd(document.getElementById(this.contentId), sel.getRangeAt(0).endOffset + 1)
        sel.removeAllRanges()
        sel.addRange(range)
        // 最后一定记得去掉原有的事件，执行我们上面自定义的事件
        e.returnValue = false
        }