How to select text on focus in a QInput

[turigeza]

I would like to select the text in a QInput when the field receives focus.

I can see there is a Vue Method just for that:
https://quasar-framework.org/components/input-textfield.html#Vue-Methods

I can also see that I could use this method to achieve what I want to do
https://quasar-framework.org/components/introduction-for-beginners.html#Handling-Vue-Methods

<template>
  <q-input ref="myRef" v-model="text" @focus="select"/>
</template>

<script>
export default {
  data: function () {
        return {
            text: ''
        };
    },
  methods: {
        select ($e) {
            this.$refs.myRef.select()
        },

}
</script>

What I would really like to do however is to avoid all these referencing business. Is there any way to do something like this

<template>
  <q-input v-model="text" @focus="callSelectMethodOnQInput" />
</template>

Is there anyway to reference the QInput select method within the template ?

<template>
  <q-input v-model="text" @focus="qInput.select()" />
</template>

I know it might be trivial to you : ) So forgive me for the stupid question if so. I am still new to it. Thank you for the help!

[lucasfernog]

I think you need to use “@focus.native” instead of “@focus”

[turigeza]

@lucasfernog Explain please ? Did you understand the question ? Maybe I did’t explain it well …

[lucasfernog]

Haha my bad, I misunderstood

[lucasfernog]

I think you would need to use something like https://github.com/vueComponent/vue-ref

<template>
<q-input v-model=“text” v-ref=“ref => this.qInput = ref” @focus=“qInput.select()” />
</template>

[turigeza]

@lucasfernog I see. : ). So it isn’t as trivial as I though it might be. Thank you for that!

[turigeza]

Since I had q-input wrapped into a custom component anyway I have solved it this way.

Custom component file QInputA.vue

<template>
    <q-input
    :value="value"
    v-on="$listeners"
    v-bind="$attrs"
    @focus="focus"
    ref="self"
    @keyup.enter="updated"
    @blur="updated"
    @keydown.meta.83.prevent="updated"
    @input="has_changed"
    />
</template>

<script>

export default {
    props: ['value'],
    data: function () {
        return {
            changed: false
        };
    },
    methods: {
        focus: function () {
            this.$refs.self.select();
        },
        has_changed: function () {
            this.changed = true;
        },
        updated: function () {
            if (this.changed) {
                this.$emit('save');
                this.changed = false;
            }
        }
    }

};
</script>

Using it like

<template>
    <q-input-a v-model="text"/>
</template>

<script>
import QInputA from 'components/QInputA';
export default {
    name: 'SomeName',
    data: function () {
        return {
           text: 'This text is selected on focus',
        };
    }
};
</script>

[gotjoshua]

this can be done more generically:

<template>
    <q-input
        v-model="who"
        label="Who"
        dense
        @focus="selectOnFocus"
        @keyup.enter="focusOnSubmit"
      />
</template>

<script>
//using composition API
// ...
setup (props) {
    const data = reactive({
      your: 'Data',
      goes: 'Here',
    })
    const dataRefs = toRefs(data)

    const selectOnFocus = (fEv) => fEv.target.select()
    return {selectOnFocus, ...dataRefs }
  },
// ...

[jubalj]

Posting for someone else looking for a simpler solution as I found a solution;

Add the following to inside the <q-input>

@focus="(input) => input.target.select()"

Found it at https://github.com/quasarframework/quasar/issues/8402

[cynderkromi]

@jubalj said in How to select text on focus in a QInput:

Posting for someone else looking for a simpler solution as I found a solution;

Add the following to inside the <q-input>

@focus="(input) => input.target.select()"

Found it at https://github.com/quasarframework/quasar/issues/8402

Thanks for this! I’m looking for the same thing. However when I apply your solution to my q-input I get this error:
Uncaught TypeError: input.target.select is not a function

I’m still pretty darn new to Quasar, is there something I’m missing when I add this?

hmm playing around, it looks like this doesn’t work on a number field. Dangit. Any solutions for a number field?
I have mask="##" included.