Get selected text in v-textarea

Question

I'm struggling to find how to get the selected text v-textarea. Can anyone provide my with some code?

I would also like to change the background-color of the selected text in v-textarea.

Possible duplicate of [How to get selected text from textbox control with javascript](https://stackoverflow.com/questions/275761/how-to-get-selected-text-from-textbox-control-with-javascript) — Phil, Aug 05 '19 at 00:36
As for your second question, see [Changing the text selection color using CSS?](https://stackoverflow.com/questions/10578073/changing-the-text-selection-color-using-css) — Phil, Aug 05 '19 at 00:38

score 0 · Answer 1 · answered Aug 05 '19 at 05:48

May it can help you.

HTML

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" rel="stylesheet"/>

<div id="app">
  <v-app id="inspire"> 
    <v-flex>
      <v-chip outlined>Your Text:
      </v-chip>
      <v-textarea
       v-model="text"
       @focus="changeBgColor"
       @blur="changeFirstBgColor"
       :style="{ background: textareaStyle }"
       height="100"
       class="ml-5"
       placeholder="click here to fill the form"
      ></v-textarea>
    </v-flex>
  </v-app>
</div>

Vue Js

new Vue({
  el:'#app',
  data:{
    text: '',
    background: '#abf5c8'
  },
  computed:{
    textareaStyle: function(){
      return this.background;
    }
  },
  methods:{
    changeBgColor: function(){
      this.background='#71e3d8';
    },
    changeFirstBgColor: function(){
      this.background='#abf5c8';
    }
  }
})

OR You can check Live Demo by CLICK HERE!

Get selected text in v-textarea

1 Answers1