vue项目中input框自动获取焦点的随记

最新推荐文章于 2023-05-25 11:41:39 发布

公有云私有云

最新推荐文章于 2023-05-25 11:41:39 发布

阅读量577

点赞数

本文链接：https://blog.csdn.net/qq_39579242/article/details/99291228

版权

此文章的记录主要为了以后如果遇到相同的开发问题，可以快速的解决问题：

vue如何自动获得input框的焦点呢？官网给出的答案是：自定义指令：v-focus

// 局部指令

directives: {
    focus: {
        // 指令的定义
        inserted: function(el){
            el.focus()
        }
    }
}

// 全局指令

Vue.directive('focus', {
    // 当被绑定的元素插入到DOM中时
    inserted: function(el) {
        // 聚焦元素
        el.focus()
    }
})

如果项目的需求不是一进入就获得焦点，而是做了相关操作，失去焦点触发弹窗，点击确认在找回焦点；或者没有弹窗，只在失去焦点就判断是否合法，不合法要找回焦点，那么此时就可以用下面的方法实现

// 通过vue的ref来获得dom元素

this.$refs.input.querySelector('input').focus();

// 由于内核的原因ie要特别处理，加一个短暂延时实现

setTimeout(() => {this.$refs.input.querySelector('input').focus();},50);

各位博友如果对你有帮助，一分也是爱