element el-input 自动获取焦点和IE下光标位置解决方法

在实际开发中我们经常会碰到这样的场景,就是有input的地方都喜欢切换过去input自动获取焦点。

如果这个问题是在input中,很容易就实现了,但是element里面的el-input看源码,其实不只是一个input,所以aotofocus 这个属性便不生效了。

解决方法网上也有不同的例子,比如vue的自定义指令,当然包括全局和组件的,但是我建议一种比较简单的写法:

this.$nextTick(() => {
this.$refs.input.$el.querySelector(‘input‘).focus()
})

因为有的时候input中是有默认值的,自动获取焦点谷歌和火狐、360浏览器光标都正常。但是在IE上光标就跑到默认值的最左边去了,、
查了下好像IE浏览器下input的光标默认就是在最左边的,很显然这不符合我们的需求,每次输入的时候用户还要多点一次。
技术分享图片
我们想要的肯定是
技术分享图片
我觉得比较严谨的做法就是先判断浏览器,判断IE浏览器的方法很多,这里就不写多种了,有兴趣自己上网查
// el-input 获得焦点事件  @focus="getCursor"

getCursor (event) {
  // 判断是不是IE浏览器
if (window.ActiveXObject || ‘ActiveXObject‘ in window) {
    // 把光标移动input默认值的最后
event.target.setSelectionRange(this.position.length, this.position.length)
}
}
 
文章来自:https://www.cnblogs.com/alvin553819/p/9669612.html
© 2021 jiaocheng.bubufx.com  联系我们
ICP备案:鲁ICP备09046678号-3