No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

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

    Framework
    3
    8
    611
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • G
      gaguerrero last edited by

      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

      1 Reply Last reply Reply Quote 0
      • beets
        beets last edited by

        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.

        1 Reply Last reply Reply Quote 0
        • metalsadman
          metalsadman last edited by

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

          1 Reply Last reply Reply Quote 0
          • G
            gaguerrero last edited by

            This post is deleted!
            1 Reply Last reply Reply Quote 0
            • G
              gaguerrero last edited by

              This post is deleted!
              1 Reply Last reply Reply Quote 0
              • G
                gaguerrero last edited by

                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 1 Reply Last reply Reply Quote 0
                • metalsadman
                  metalsadman @gaguerrero last edited by 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)
                  
                  1 Reply Last reply Reply Quote 0
                  • G
                    gaguerrero last edited by

                    Yeeeeeeeaa!, Thank You!

                    1 Reply Last reply Reply Quote 0
                    • First post
                      Last post