【Vue】输入框状态切换&自动获取输入框焦点の实现

名字都没了~

已于 2023-04-10 14:45:12 修改

阅读量3.8k

点赞数 1

文章标签： vue.js javascript 前端

于 2023-04-10 14:39:52 首次发布

本文链接：https://blog.csdn.net/weixin_45912372/article/details/130059682

版权

文章讲述了在Vue.js中如何实现点击按钮显示输入框，并在输入框获得焦点时自动聚焦。通过data中的visibility控制输入框的显示状态，使用@click和@blur事件处理按钮点击和输入框失去焦点的情况。同时，文章提到了在DOM未渲染完成时获取焦点会导致错误，因此推荐使用setTimeout、$nextTick或updated生命周期钩子来确保正确设置焦点。

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

场景：点击button按钮展示输入框，并自动获取对话框焦点，失去焦点时展示button按钮

实现：

点击button按钮展示输入框,失去焦点时展示button按钮

在data中定义visibility，确定输入框的展示状态，默认为false
定义changeVisibility方法，并给button绑定点击事件@click="changeVisibility"，实现点击按钮展示输入框，给输入框绑定失去焦点事件@blur="changeVisibility"
定义input和button元素，绑定条件渲染指令v-if，当visibility为false时展示按钮，反之展示输入框

代码实现：

<template>
	<div>
        <label for="input">
            <input type="text" ref="inputRef" v-if="visibility" @blur="changeVisibility">
            <button @click="changeVisibility" v-else>展示文本框</button>
    	</label>
    </div>
</template>

<script>
	export default {
        data() {
            return {
                visibility: false
            }
        },
        methods: {
            changeVisibility() {
                this.visibility = !this.visibility // 切换 visibility，控制输入框的显示状态
            }
        }
    }
</script>

自动获取对话框焦点

文本框的焦点可以通过.focus()获取，因此我们可以通过this.$refs.inputRef.focus()获取到显示的输入框的焦点(inputRef是创建文本框时添加的ref引用)。但是方法定义在组件渲染之前，因此直接在方法中添加会导致控制台报错:Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'focus')"。这是由于浏览器执行到this.$refs.inputRef.focus()

时，input元素还没有被渲染到页面上，此时DOM中还不存在指定的input元素。为了避免这种情况，可以使用以下三种方法推迟焦点的获取
- 设置定时器, 推迟焦点的获取
```
setTimeout(()=> {
    this.$refs.inputRef.focus()
},0)
```
  设置一个0ms的定时器，当浏览器执行到定时器时，会将定时器内部的函数放入延迟队列中，当定时器的等待事件结束后，会将函数放入消息队列的末尾，消息队列的执行按照先进先出原则，当前面的任务执行完成后，浏览器会自动执行this.$refs.inputRef.focus()实现焦点的获取
- 使用 $nextTick 方法, 将获取焦点推迟到下一个 DOM 更新周期
```
this.$nextTick(()=> {
	this.$refs.inputRef.focus()
})
```
  组件的$nextTick(cb)方法，会把 cb 回调推迟到下一个 DOM 更新周期之后执行。
  
  通俗的理解是：等组件的 DOM 更新完成之后，再执行 cb 回调函数。从而能保证 cb 回调函数可以操作到最新的 DOM 元素。
- 将获取焦点放到updated生命周期中执行（不推荐）
  使用这个方法时，需要加上if判断，否则每一次this.visibility发生变化时，都会执行一次更新，增加服务器的负担
```
updated() {
    if (this.visibility){
        this.$refs.inputRef.focus()
    }
}
```
  当组件处于updated时，页面已经根据最新的数据渲染完成了，此时我们执行this.$refs.inputRef.focus()就可以正常获取输入框的焦点