Set cursor position to the end of a q-input , and set focus programatically

gaguerrero

I have a text box where the password must be loaded, and a checkbox that allows it to be displayed or hidden again.
I need that when the check is changed the focus returns to the password and the cursor is positioned on the end. Thank you

beets

You can do it by using https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange

So something like:

// Get native input element, put ref="passwordInputRef" on the q-input
const inputEl = this.$refs.passwordInputRef.$el.getElementsByTagName('input')[0]
inputEl.setSelectionRange(inputEl.value.length, inputEl.value.length)

It’s untested but should help you get started.

metalsadman

The native input has a ref so just this.$refs.refInput.$refs.input.setSelectionRange(...) should work.

gaguerrero

This post is deleted!

gaguerrero

This post is deleted!

gaguerrero

thanks for the answers, I have placed the code but it does not work. Would appreciate your help.

this.tipopassword = this.verpass?‘text’:‘password’
let e = this.$refs.pass.$refs.input
e.focus()
e.setSelectionRange(e.value.length,e.value.length)

metalsadman

@gaguerrero said in Set cursor position to the end of a q-input , and set focus programatically:

e.focus()
e.setSelectionRange(e.value.length,e.value.length)

just use a delay. ie.

setTimeout(()=> {
  e.setSelectionRange(e.value.length,e.value.length)
}, 1)

gaguerrero

Yeeeeeeeaa!, Thank You!