Vue设置输入框input的焦点focus | 您所在的位置:网站首页 › 获取当前页面的焦点 › Vue设置输入框input的焦点focus |
设置输入框焦点
在普通的HTML中设置输入框焦点很容易,所有的浏览器都支持编辑框的内置方法,只要能拿到编辑框对象,调用方法设置焦点即可,比如: let input = document.getElementById('user_name'); input.focus();在Vue中,调用的方法就不一样了,要想在js中找到组件,先用下面的写法在模板中指定input的ref的值: //模板中给组件指定ref通常,你搜到的很多答案都说通过$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的官方文档 有帮助,请点赞,有问题,请留言 感谢 |
CopyRight 2018-2019 实验室设备网 版权所有 |