Vue可编辑div组件------解决插入emoji时的光标问题

最新推荐文章于 2024-07-15 18:08:10 发布

cyl97

最新推荐文章于 2024-07-15 18:08:10 发布

阅读量1k

点赞数 1

分类专栏： vue踩坑记录文章标签： vue

本文链接：https://blog.csdn.net/cyl97/article/details/115298076

版权

本文详细介绍了如何在Vue组件中处理可编辑div的光标问题，特别是当插入emoji时如何正确维护光标位置。通过记录光标最后位置和操作selection与range，确保了在插入表情后光标的正确显示。

摘要由CSDN通过智能技术生成

大神原文
https://segmentfault.com/a/1190000005869372

1.记录光标最后位置

//1. data()
lastEditRange: ''

// 2. 给可编辑div绑定keyup事件、click事件
recordLastEditRange() {
   
    // 获取选定对象
    const selection = getSelection()
    // 设置最后光标对象
   this.lastEditRange = selection.getRangeAt(0)
}

2. 插入emoji

selection: 点击任何一个可编辑区域，就会产生一个selection选中对象（鼠标选中一段文字变成蓝色的那个方块），有且只存在一个。

range：不断闪烁的光标，是selection对象的一个东西，这里主要操作range

    selectEmoji(emoji) {
   
      // 可编辑div
      const inp = this.$refs.inpMsgRef
      inp.focus()
      // 获取选定对象
      var selection = getSelection()
     
      // 1. 判断是否有最后光标对象存在