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.

    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, 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