How to select text on focus in a QInput



  • 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!



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



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



  • Haha my bad, I misunderstood



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



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



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

Log in to reply