CODEWITHSUNDEEP
vue.jsvuejs2vuetify.js
PurryFury
PurryFury

Reputation: 154

How to get selectionStart and selectionEnd properties of v-textarea in VueJS?

I know you can get the startSelection and selectionEnd properties of normal <textarea> by using DOM or $refs in VueJS.

I however am struggling to accomplish the same thing with <v-textarea>. I have googled around and most things either use normal JS with <textarea> or VueJS but also with <textarea>.

Sample Code:

 <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>

The code above returns undefined for both.

Upvotes: 1

Views: 1216

Answers (2)

zerbene
zerbene

Reputation: 1502

With the Vuetify upgrade to Vuetify 3, this.$refs.vta.$refs.input.selectionStart no longer works.

Here's how to access selectionStart for a v-textarea

this.$refs.vta.$el.querySelector('textarea').selectionStart

Upvotes: 1

yoduh
yoduh

Reputation: 14699

$refs.vta only returns the v-textarea element, which is a wrapper element containing its own refs which includes the inner <textarea> input element. You can access the inner element to get selectionStart and selectionEnd like so:

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

sandbox example

Upvotes: 2

Related Questions