vue键盘事件

键盘事件

1.键盘的常用事件

  @keydown(键盘按下时触发),@keypress(键盘按住时触发),@keyup(键盘弹起时触发)

2.获取键码

 <input type="text" @keydown="show($event)">
 let vm=new Vue({
  el:'#myApp',
  data:{ 
  },
  methods:{ 
      show(e){
          console.log(e.keyCode)//获取按键的键码
      },
  }
  });

3.按下某个键时触发事件

<input type="text" @keydown.65="show($event)">  

当按下“65”即“a”的时候,触发事件show();
vue2中内置了一些键位别名(enter,up,down,left,right),也可以触发事件,比如

<input type="text" @keydown.enter="show($event)">   

4.自定义键位别名

Vue.config.keyCodes = {
     v: 86,
     f1: 112,(f1为浏览器的帮助快捷键,会有冲突,使用时alt+f1)
}

使用:
<input type="text" @keydown.v="show($event)">   
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容