Vue设置输入框input的焦点focus

设置输入框焦点

在普通的HTML中设置输入框焦点很容易，所有的浏览器都支持编辑框的内置方法，只要能拿到编辑框对象，调用方法设置焦点即可，比如：

<div>
	<input id="user_name" />
</div>

let input = document.getElementById('user_name');
input.focus();

在Vue中，调用的方法就不一样了，要想在js中找到组件，先用下面的写法在模板中指定input的ref的值：

//模板中给组件指定ref
<div>
	<input ref="user_name" />
</div>

通常，你搜到的很多答案都说通过$refs来获取组件，设置焦点就可以了，如下：

let input = this.$refs.user_name;
input.focus();

你可能会遇到这个脚本错误的信息“focus is not a function”
于是，你再找文章，可能会介绍下面的方法：

let input = this.$refs.user_name;
input.$el.focus();

实际上，在我测试的一个列表的的应用里（列表每个元素有一个编辑框），这个$el也是个undefined，仍然不行。
如果你试了上面的方法都不行的时候，别气馁，下面的方法也许能让你出坑。

let input= this.$refs["user_name"];
input[0].focus();

或者简单点，一句话

this.$refs["user_name"][0].focus();

也就是从$refs里面拿出来这个组件后，它的第0个元素，才是input的真身。

另外

如果要实现页面加载后，立即让编辑框获得焦点并进入编辑状态，请移步VUE的官方文档

有帮助，请点赞，有问题，请留言 感谢