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!