vue2监测光标位置并手动定位到某个位置

vue2中开发评论模块时,在评论文本输入完成后,往往需要在文本某处插入表情或其他内容,但在打开表情列表选了表情之后,textarea失去焦点后往往无法在刚才鼠标定位处插入表情,因此需要解决以下两个需求:

1、选好表情后,执行插入动作时,需要定位好刚才光标移动到或鼠标 focus 点到的位置。

2、textarea 必须在重新聚焦时自动聚焦到定位好的位置。

这里需要对 textarea 进行监测,要对键盘移动光标和鼠标点击两个动作进行光标位置监测。

1、用 @input="getCursorPos" @focus="getCursorPos" 监测移动光标

2、用 @mousedown="getCursorPos" @mouseup="getCursorPos" 监测鼠标点击

在插入表情之前,监测光标位置后,还需要判定光标的位置,通过 textarea 获取 selectionStart 和 selectionEnd 的值得到光标的起始、结束位置,再通过调用 setSelectionRange 方法将光标的位置标注出来,实现定位。

复制代码
// 添加 emoji
addEmoji (code) {
  const obj = this.$refs.commentInput;

  // 在光标位置插入 emoji
  const startPos = obj.selectionStart; // 光标起始位置
  const endPos = obj.selectionEnd; // 光标结束位置

  // 截取内容并插入 emoji
  this.commentText = this.commentText ? this.commentText.substring(0, startPos) + code + this.commentText.substring(endPos, this.commentText.length) : code;

  obj.focus(); // 自动聚焦

  // setSelectionRange 必须在 nextTick 中才有效
  this.$nextTick(() => {
    obj.setSelectionRange(endPos, endPos);

    // 将光标位置手动定位到刚刚添加 emoji 的后面
    this.cursorPos += 2;
    obj.setSelectionRange(this.cursorPos, this.cursorPos);
  })
},

最后在定位之后,将光标向插入表情的后一位移动,以实现连续插入的效果。

下面实现光标位置的监测

复制代码
// 监测光标位置
getCursorPos () {
  // 检测光标的位置
  let commentInput = this.$refs.commentInput;

  if (commentInput) {
    this.cursorPos = commentInput.selectionStart;
  }
},

注意,这里使用的是 selectionStart,只能实现选择文本时对光标的监测,但我们可以将选择文本的起始和结束位置设置在同一个定位数值上,则相当于使用了选择文本功能,但却什么都没选,间接实现了定位到具体某个位置的功能。

相关推荐
你的人类朋友28 分钟前
🫏光速入门cURL
前端·后端·程序员
兴趣使然_1 小时前
【笔记】使用 html 创建网址快捷方式
笔记·html·js
01传说1 小时前
vue3 配置安装 pnpm 报错 已解决
java·前端·vue.js·前端框架·npm·node.js
小李飞飞砖1 小时前
React Native 组件间通信方式详解
javascript·react native·react.js
小李飞飞砖1 小时前
React Native 状态管理方案全面对比
javascript·react native·react.js
烛阴2 小时前
Python装饰器解除:如何让被装饰的函数重获自由?
前端·python
千鼎数字孪生-可视化2 小时前
Web技术栈重塑HMI开发:HTML5+WebGL的轻量化实践路径
前端·html5·webgl
凌辰揽月2 小时前
7月10号总结 (1)
前端·css·css3
天天扭码3 小时前
很全面的前端面试——CSS篇(上)
前端·css·面试
EndingCoder3 小时前
搜索算法在前端的实践
前端·算法·性能优化·状态模式·搜索算法