在HTML中的键盘事件有:
1.onkeyup 事件会在键盘按键被松开时发生。
2.onkeydown 事件会在用户按下一个键盘按键时发生。
3.onkeypress 事件会在键盘按键被按下并释放一个键时发生。
那么在Vue2中我们该如何实现键盘事件呢?
Vue2键盘事件:keydown/keyup...
下面用一个列子说明如何使用:
HTML代码:
<div id="box">
<input type="text" placeholder="请输入" @keyup="show($event)">
<input type="text" placeholder="请输入" @keyup.13="show($event)">
</div>
JavaScript代码:
var vm = new Vue({
el:'#box',
methods:{
show:function(event){
if(event.keyCode == 13){
alert('你按回车键了');
}
},
}
});
当按下键盘的时候,执行show方法,然后再去执行相应的业务。
上面两个按钮的效果是一样的,因为回车键(Enter)的键盘代码是13
关于键盘值,可以查看详细的键盘键值表
这里列举一些常用的键盘事件:
@keyup.13 回车
@keyup.enter 回车
@keyup.left 左键
@keyup.right 右键
@keyup.up 上键
@keyup.down 下键
@keyup.delete 删除键