监听键盘事件经常需要检测keyCode。Vue.js可以为v-on添加键盘修饰符,代码示例如下:
<template>
<div id="demo">
<input v-on:keyup.13="alertB">
<span>AAA</span>
</div>
</div>
</template>
<script>
export default{
name:'helloWorld',
data(){
return{
}
},
methods:{
alertB:function(){
console.log('B')
}
}
}
</script>
我这边运行过后发现只有在鼠标的焦点在input标签内的时候,才能够响应键盘事件。应该是只有在输入的时候键盘事件才有效果。
由于keyCode比较多,要全部记忆比较麻烦,Vue.js为常用的按键提供了别名,具体如下:
enter (keyCode:13)
tab (keyCode:9)
delete (keyCode:8,46)
esc (keyCode: 27)
space (keyCode:32)
up (keyCode:38)
down (keyCode:40)
left (keyCode:37)
right (keyCode:39)
扫描二维码关注公众号,回复: 3147346 查看本文章
完整的keyCode编码表如下:
keyCode键盘编码表参考文章:
https://blog.csdn.net/Richard_Jason/article/details/52891940
更多优质文章,可以微信扫码关注: