Vue:使用v-model绑定的textarea在光标处插入指定文本

一、问题描述

使用v-model绑定的textarea如果需要改变其内容,一般只要改变v-model对应的变量即可,但如果需要在textarea的当前光标位置插入指定文本,那就需要操作DOM了。于是我们写了一段js:

const insertTextAtCursor = (text) => {
  const textarea = document.querySelector('textarea')
  if (textarea) {
    const startPos = textarea.selectionStart
    const endPos = textarea.selectionEnd
    const value = textarea.value

    const beforeText = value.substring(0, startPos)
    const afterText = value.substring(endPos, value.length)
    const newValue = beforeText + text + afterText
    textarea.value = newValue
    textarea.selectionStart = textarea.selectionEnd = startPos + text.length
  }
}

但如果直接调用上述代码的insertTextAtCursor 函数,就会发现一些古怪的现象,比如下面点击[插入客户昵称],就会在textarea的当前光标处插入指定文本,但实际插入却不理想:

二、解决方案

上述问题产生的原因跟textarea.value与v-model直接产生了冲突,于是只要改一下代码:

const insertTextAtCursor = (text) => {
  const textarea = document.querySelector('textarea')
  if (textarea) {
    const startPos = textarea.selectionStart
    const endPos = textarea.selectionEnd
    const value = textarea.value

    const beforeText = value.substring(0, startPos)
    const afterText = value.substring(endPos, value.length)
    const newValue = beforeText + text + afterText
    form.value.next_visit_content = newValue

    nextTick(() => {
      textarea.selectionStart = textarea.selectionEnd = startPos + text.length
    })
  }
}
相关推荐
码蜂窝编程官方24 分钟前
【含开题报告+文档+PPT+源码】基于过滤协同算法的旅游推荐管理系统设计与实现
java·vue.js·spring boot·后端·spring·旅游
抖码3 小时前
【VUE】Vue的diff算法和React的diff算法
javascript·vue.js·react.js
serve the people7 小时前
vue中父组件给子组件传递数据
前端·javascript·vue.js
乔没乔见Joe8 小时前
使用Apifox创建接口文档,部署第一个简单的基于Vue+Axios的前端项目
前端·javascript·vue.js·vscode·axios
m0_528723818 小时前
在前端开发中,如何处理列表分页时遇到接口延迟或数据返回顺序不一致的问题
前端·javascript·vue.js
抖码8 小时前
【VUE】介绍一下Vue中的虚拟DOM【小面试】
前端·javascript·vue.js
卓越软件开发9 小时前
基于SSM创城志愿者管理系统JAVA|VUE|Springboot计算机毕业设计源代码+数据库+LW文档+开题报告+答辩稿+部署教+代码讲解
java·vue.js·spring boot
serve the people10 小时前
vue中用echarts做一个躺着的柱状图
前端·vue.js·echarts
道爷我悟了10 小时前
Vue入门-Vue中实例和java中类的相同和不同
java·javascript·vue.js
这孩子叫逆11 小时前
前端自定义指令控制权限(后端Spring Security)
前端·javascript·vue.js·authing