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

相关推荐
WTSolutions5 分钟前
Excel 转 JSON by WTSolutions API 文档
javascript
AverageJoe19916 分钟前
一次vite热更新不生效问题排查
前端·debug·vite
努力只为躺平7 分钟前
🔥 油猴脚本开发指南:从基础API到发布全流程
前端·javascript
bitbitDown9 分钟前
我用Playwright爬了掘金热榜,发现了这些有趣的秘密... 🕵️‍♂️
前端·javascript·vue.js
陈随易13 分钟前
VSCode v1.102发布,AI体验大幅提升
前端·后端·程序员
ma7718 分钟前
JavaScript 获取短链接原始地址的解决方案
前端
该用户已不存在18 分钟前
关于我把Mac Mini托管到机房,后续来了,还有更多玩法
服务器·前端·mac
tianchang21 分钟前
SSR 深度解析:从原理到实践的完整指南
前端·vue.js·设计模式
闲蛋小超人笑嘻嘻22 分钟前
前端面试十一之TS
前端
摆烂为不摆烂22 分钟前
😁深入JS(四): 一文让你完全了解Iterator+Generator 实现async await
前端