vue使用快捷键（F1-F12），聚焦el-input框并选中文本

爱嘤嘤嘤斯坦...

于 2022-09-14 10:34:22 发布

阅读量1.7k

点赞数

分类专栏：问题总结文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_55472979/article/details/126847699

版权

问题总结专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何在Vue组件中使用自定义指令来监听`<el-input>`的聚焦状态，并结合键盘事件实现F2快速聚焦。通过`v-focus`指令更新元素聚焦状态，配合`focusSelect`方法完成选中文本操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面input

<el-input ref="refKehu" id="dome" size="mini" 
 type="number" 
 v-model="payment" 
 @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
      }
    },
  }