在VueJS中如何获取v-textarea的selectionStart和selectionEnd属性？

问题原因 #

你直接通过this.$refs.vta访问selectionStart和selectionEnd返回undefined，是因为$refs.vta拿到的是Vuetify的v-textarea组件实例，而非原生的<textarea> DOM元素。这两个属性是原生textarea元素的专属API，组件实例本身并不具备。

解决方案 #

方法1：通过组件DOM元素查找原生textarea #

利用组件的$el属性获取根DOM元素，再通过querySelector定位内部的原生textarea：

emitSelectedPositons() {
  const textareaEl = this.$refs.vta.$el.querySelector('textarea');
  this.$emit('changed', {
      start: textareaEl?.selectionStart,
      end: textareaEl?.selectionEnd
  })
}

使用可选链操作符?.可以避免因DOM未加载完成或元素不存在导致的报错。

方法2：直接访问组件暴露的原生元素（部分Vuetify版本支持） #

部分Vuetify版本中，v-textarea组件会直接暴露内部的原生textarea元素，可通过inputElement属性快速获取：

emitSelectedPositons() {
  const textareaEl = this.$refs.vta.inputElement;
  this.$emit('changed', {
      start: textareaEl?.selectionStart,
      end: textareaEl?.selectionEnd
  })
}

注意：该属性的可用性取决于你使用的Vuetify版本，若此方法无效，优先使用方法1。

注意事项 #

• 确保在组件挂载完成后访问ref（比如在mounted钩子或用户交互事件中），避免因DOM未渲染完成导致$refs.vta为undefined。
• 若v-textarea是动态渲染（比如用v-if控制显示），需确保组件已渲染后再执行获取操作。

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