How to get the Cursor Position form q-input?



  • I need access to the current cursor position in the q-input field the following code returns cursorPos: undefined on the console.

    This shows how to do it for a regular input field. Not sure why quasar is not exposing the input element.
    https://stackoverflow.com/a/48149119/11314311

    What is the correct way to do this?

    <q-input v-model="input" ref="inputval" @input="changeInput" />
    
    changeInput(value) {
       if (this.$refs.inputval) {
          this.cursorPosition = this.$refs.inputval.selectionStart;
          console.log('cursorPos:', this.cursorPosition)
      }
      this.cursorPosition = 0;
    },
    


  • @wagner try this.$refs.inputval.$el.selectionStart notice the $el. or log your ref and see children elements, look for the input element, so you can select it using the children’s array.



  • Unfortunately, this.$refs.inputval.$el.selectionStart does not work either.

    This is the S section under this.$refs.inputval.$el when I log it to the console.

    prefix: null
    previousElementSibling: p.instructmsg
    previousSibling: p.instructmsg
    scrollHeight: 76
    scrollLeft: 0
    scrollTop: 0
    scrollWidth: 496
    shadowRoot: null
    slot: ""
    spellcheck: true
    style: CSSStyleDeclaration {alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}
    tabIndex: -1
    tagName: "DIV"
    textContent: ""
    title: ""
    translate: true
    


  • @wagner here https://codepen.io/metalsadman/pen/VwwVMaK?&editable=true&editors=101, basically you want to tap into the actual input element wrapped by QInput. logging the refs will give you hint, I got it that way in the browser console log.



  • This works. Thank you.


Log in to reply