I have an input that uses the following events:
<b-nput
class="input"
id="link"
v-model="link"
placeholder="link"
@focus="$event.target.select()"
></b-input>
How do I use this inside @focus="$event.target.select()" Event:
The above method copies the value. I need to trigger the above selection focus event when the user clicks copy How can this be done correctly?
Provide a
referencefor your input:<b-input class="input" id="link" v-model="link" placeholder="link" ref="theInput" ></b-input>Then anywhere in the component script:
Add
savedmethod as focus event handler:method:
methods: { saved(event){ //the event is passed automatically as parameter event.target.select() } }edit:
Try adding
refto the input element<b-input ref="input" class="input" id="link" v-model="link" placeholder="link" @focus="$event.target.select()" ></b-input>Then trigger focus programmatically within the method:
methods: { async copy(s) { await navigator.clipboard.writeText(s) this.$refs.input.focus(); ... } }