美文网首页
vue使用快捷键(F1-F12),聚焦el-input框并选中文

vue使用快捷键(F1-F12),聚焦el-input框并选中文

作者: 前端小飞象 | 来源:发表于2021-03-16 16:36 被阅读0次

业务需求:通过键盘快捷键,如:F2,选中input框,可直接输入值。

  • 页面input

 <el-input v-model="buyAmount"
           @blur="focusState = false"
           @focus=" focusSelect($event)"
           v-focus="focusState">
 </el-input>
  • 事件监听和触发input聚焦

 data(){
      return{
          focusState: false
      }
  },
  mounted(){
      addEventListener('keydown', this.keyDown)//创建监听键盘事件
  },
  directives: {
    focus: {
      //根据focusState的状态改变是否聚焦focus
      update: function (el, { value }) {    //第二个参数传进来的是个json
        if (value) {
          //使用的el-input
          el.getElementsByTagName("input")[0].focus()
        }
      }
    }
  },
  method:{
  //得到焦点选中
    focusSelect (event) {
      event.currentTarget.select();
    },
   keyDown(e) {
      console.log(e);
      if (e.key == 'F2') {
        this.focusState= true
        e.preventDefault();//阻止浏览器默认事件
        return false
      }
    },
  }

相关文章

网友评论

      本文标题:vue使用快捷键(F1-F12),聚焦el-input框并选中文

      本文链接:https://www.haomeiwen.com/subject/sspdcltx.html