VueJS/Vuetify：如何在textarea光标位置插入文本

我来帮你搞定这个问题！你已经实现了点击按钮后聚焦textarea，接下来只需要利用原生textarea的DOM API，就能精准在光标位置插入文本标签。下面是具体的实现步骤：

1. 调整模板代码 #

首先确保你的textarea和按钮的模板是这样的（注意ref和参数传递的细节）：

<!-- 给v-textarea添加ref，方便获取DOM元素 -->
<v-textarea 
  ref="targetTextarea" 
  v-model="formContent" 
  label="输入内容"
></v-textarea>

<!-- 按钮点击时传递要插入的标签文本和ref名称 -->
<v-btn small flat @click.stop="insertTag(`{{${title}}}`, 'targetTextarea')">
  + Title
</v-btn>

这里用模板字符串把title变量包装成{{title}}的标签格式，如果你需要其他格式的标签，直接修改第一个参数即可。

2. 完善insertTag方法 #

在你的Vue组件的methods里实现这个方法，核心是利用原生textarea的selectionStart、selectionEnd属性获取光标位置，然后拼接新内容，并恢复光标到插入后的位置：

methods: {
  insertTag(tagText, refName) {
    // 获取Vuetify的textarea组件实例
    const textareaComp = this.$refs[refName];
    if (!textareaComp) return;

    // 获取内部的原生textarea DOM元素
    const textarea = textareaComp.$el.querySelector('textarea');
    if (!textarea) return;

    // 先聚焦（你已经实现的部分可以保留）
    textarea.focus();

    // 获取当前光标选中的起始和结束位置
    const startPos = textarea.selectionStart;
    const endPos = textarea.selectionEnd;

    // 拼接新的内容：光标前的文本 + 插入的标签 + 光标后的文本
    const newContent = 
      this.formContent.substring(0, startPos) + 
      tagText + 
      this.formContent.substring(endPos);

    // 更新v-model绑定的变量，触发视图更新
    this.formContent = newContent;

    // 异步恢复光标位置到插入标签的末尾（因为Vue更新DOM是异步的）
    setTimeout(() => {
      textarea.selectionStart = textarea.selectionEnd = startPos + tagText.length;
    }, 0);
  }
}

关键细节说明 #

• 为什么要获取原生textarea？：Vuetify的<v-textarea>是封装后的组件，它的ref指向的是组件实例，不是原生textarea元素，所以需要通过$el.querySelector('textarea')拿到真正的输入框DOM。
• setTimeout的作用：Vue更新DOM是异步执行的，所以需要等DOM更新完成后再调整光标位置，否则光标可能会跳到文本末尾。
• 选中内容替换：如果用户选中了一段文本，这个方法会自动用插入的标签替换选中的内容，这是一个额外的实用功能哦。

内容的提问来源于stack exchange，提问作者pirmax