CODEWITHSUNDEEP
javascriptvue.jsinputvuejs2jquery-events
Ben
Ben

Reputation: 1630

For text input, how to make it so that clicking on it will select everything?

I've found this: Copy to Clipboard that also works on Mobile?

But VueJS doesn't use jQuery. So what is the alternative to this?

Upvotes: 28

Views: 23301

Answers (3)

Bruno De Freitas Barros
Bruno De Freitas Barros

Reputation: 2409

Based on https://medium.com/vuejs-tips/tip-11-auto-select-input-text-on-focus-9eca645073cd article:

<input @focus="$event.target.select()">

Upvotes: 63

SongZeng
SongZeng

Reputation: 161

<input type="text" ref="input" @click="selectAll">

selectAll() {
  this.$refs.input.select();
}

[]: https://jsfiddle.net/s7L895n7/14/

Upvotes: 15

Gerardo
Gerardo

Reputation: 979

You can still use JQuery, just add the script to your HTML, but if you don't want to use JQuery the alternative is to use vanilla Javascript (pure JS).

The setSelectionRange(start, end) method of an input is the answer you may want.

Here's a demo.

Working demo

Upvotes: 5

Related Questions