vue element Ui input 输入框定时获取焦点

小半 • 2023年1月18日下午6:12 • 前端开发 • 阅读 453

问题：扫码枪扫描条码扫描过快，焦点会移动到浏览器窗口上的加号位置，并打开新页面

修改

给 input 框添加 定时获取焦点功能

一，element并不支持autofocus属性，那就只能通过原生的js效果获取聚焦效果了

document.getElementById("input").focus();

二，或者利用vue的ref属性也可以实现聚焦效果：

原理其实很简单，Element 已经提供了 focus 方法，但是文档并没有写明如何去调用,下面是在el-input标签上加入ref属性，然后在需要的地方直接调用方法就可以了

<el-input v-model="input" placeholder="请输入内容" ref="input"></el-input>


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

注意：一个页面只能有一个聚焦效果

last , vue也支持自定义指令

当页面加载时，该元素将获得焦点 (注意：autofocus 在移动版 Safari 上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能：


// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
    // element-ui
    el.children[0].focus()
    // 元素有变化，如show或者父元素变化可以加延时或判断
    setTimeout(_ => {
      el.children[0].focus()
    })
  }
})

项目示例代码

 <el-input ref="input"  v-model="barcode"  clearable  size="small"
      placeholder="请扫描条码编号" style="width: 200px"  class="filter-item"  @keyup.enter.native="toQuery()"
 />


  mounted() {
    this.timer = setInterval(() => {
      this.$nextTick(() => {
        this.$refs.input.focus(); // 定时自动获取焦点
      });
    }, 1000);
  },