Focus on an input field with a button click VueJS 3

Question

<template>
  <button @click="focusInput">Click me to focus on the input</button>
  <input ref="inputField" type="text">
</template>

<script setup>
  const focusInput = () => {
    this.$refs.inputField.focus();
  };
</script>

I'm trying to set the focus into the input field on a button click but does not work with Vue 3. Really appreciate it if somebody can help. Thanks

working fine this code in vuejs3 codesandbox.io/s/vuejs3-auto-focus-qeme8w — Farjan
– Farjan, Commented Jun 18, 2022 at 7:20

Nikola Pavicevic · Accepted Answer · 2022-06-18 12:49:52Z

8

Try like following snippet (this is something else in script setup, and you can not use $refs):

<script setup>
  import { ref } from 'vue'
  const inputField = ref()
  const focusInput = () => {
    inputField.value.focus();
  };
</script>

const { ref } = Vue
const app = Vue.createApp({
  setup() {
    const inputField = ref()
    const focusInput = () => {
      inputField.value.focus()
    }
    return { focusInput, inputField }
  },
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <button @click="focusInput">Click me to focus on the input</button>
    <input ref="inputField" type="text">
</div>

edited Jun 18, 2022 at 12:49

answered Jun 18, 2022 at 7:11

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mishen Thakshana Over a year ago

This worked make const inputField = ref();

Nikola Pavicevic Over a year ago

@Beluga B69 hey mate , yes my bad, I corrected the answer, cheers :)

Collectives™ on Stack Overflow

Focus on an input field with a button click VueJS 3

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related