Set cursor position to the end of a q-input , and set focus programatically
-
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 -
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.
-
The native input has a ref so just
this.$refs.refInput.$refs.input.setSelectionRange(...)
should work. -
This post is deleted! -
This post is deleted! -
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) -
@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)
-
Yeeeeeeeaa!, Thank You!