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

相关推荐
aha-凯心32 分钟前
前端学习 vben 之 axios interceptors
前端·学习
熊出没1 小时前
Vue前端导出页面为PDF文件
前端·vue.js·pdf
VOLUN1 小时前
Vue3项目中优雅封装API基础接口:getBaseApi设计解析
前端·vue.js·api
此乃大忽悠1 小时前
XSS(ctfshow)
javascript·web安全·xss·ctfshow
用户99045017780091 小时前
告别广告干扰,体验极简 JSON 格式化——这款工具让你专注代码本身
前端
前端极客探险家1 小时前
告别卡顿与慢响应!现代 Web 应用性能优化:从前端渲染到后端算法的全面提速指南
前端·算法·性能优化
袁煦丞2 小时前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆2 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记2 小时前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆2 小时前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js