在 vue 中 input 输入框自动获取焦点

最新推荐文章于 2025-04-01 14:43:20 发布

itBellah

最新推荐文章于 2025-04-01 14:43:20 发布

阅读量4.4k

点赞数 3

文章标签： vue.js 前端

本文链接：https://blog.youkuaiyun.com/candyHZhou/article/details/105734884

版权

本文介绍了如何在 Vue.js 应用中使输入框(input)在页面加载时自动获得焦点，通过代码示例展示具体实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1\ 效果图
页面初始就自动获得焦点
输入框自动获取焦点
2\ 代码实现

<template>
  <div>
    <el-input v-model="plate" type="number" id="plateInput" ref="plateRef" placeholder="请输入搜索关键字"></el-input>
  </div>
</template>

// 方法一：通过原生 JS 的 focus 方法直接获取
<script>
export default {
  data(){
    return{
      plate: ""
    }
  },
  mounted(){
    document.getElementById("plateInput").focus()
  }
}
</script>

// 方法二：通过 ref 方式
<script>
export default {
  data(){
    return{
      plate: ""
    }
  },
  mounted(){    
    this.$refs.plateRef.focus()
  }
}
</script>

// 方法三：通过自定义指令
<template>
  <div>
    <el-input v-model="plate" type="number" v-focus id="plateInput" placeholder="请输入搜索关键字"></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      plate: "",

    };
  },
  //自定义指令
  directives: {
    focus: {
      // 指令的定义
      inserted: function(el) {
        el.children[0].focus();
        //使用官方示例 el.focus(); 不能自动获取焦点，是因为 insert是一个钩子函数，只有父节点存在，在插入父节点时调用，我这里并没有插入所以没有调用。
      }
    }
  }
};
</script>