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

Posted 2021-01-07 alvin553819

在实际开发中我们经常会碰到这样的场景，就是有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)
  }
}