如何在VueJS中获取虚拟文本区域的selectionStart和selectionEnd属性?

ou6hu8tu  于 2023-01-09  发布在  Vue.js
关注(0)|答案(1)|浏览(374)

我知道您可以通过在VueJS中使用DOM或$refs来获得普通<textarea>的startSelection和selectionEnd属性。
然而,我正在努力用<v-textarea>完成同样的事情。我在谷歌上搜索过,大多数事情要么用<textarea>或vuejs的普通js,要么用<textarea>
样本代码:

<v-textarea
            :value="value"
            :label="label"
            hide-details="auto"
            :name="name"
            auto-grow
            no-resize
            clearable
            rows="1"
            @input="emitSelectedPositons"
            :error-messages="errorMessages"
            ref="vta"
/>

...

<script>
  ....
  methods: {
      emitSelectedPositons() {
          this.$emit('changed', {
              start: this.$refs.vta.selectionStart,
              end: this.$refs.vta.selectionEnd
          })
      }
  }
</script>

上面的代码为两者返回undefined

5lhxktic

5lhxktic1#

$refs.vta只返回v-textarea元素,它是一个包含自己的refs的 Package 器元素,refs包含内部的<textarea> input元素。您可以访问内部元素来获取selectionStart和selectionEnd,如下所示:

this.start = this.$refs.vta.$refs.input.selectionStart;
this.end = this.$refs.vta.$refs.input.selectionEnd;

sandbox example

相关问题