Vue学习从入门到精通(八)按键事件绑定

  监听键盘事件经常需要检测keyCode。Vue.js可以为v-on添加键盘修饰符,代码示例如下:




我这边运行过后发现只有在鼠标的焦点在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)

完整的keyCode编码表如下:
Vue学习从入门到精通(八)按键事件绑定_第1张图片
Vue学习从入门到精通(八)按键事件绑定_第2张图片
Vue学习从入门到精通(八)按键事件绑定_第3张图片
Vue学习从入门到精通(八)按键事件绑定_第4张图片
keyCode键盘编码表参考文章:
https://blog.csdn.net/Richard_Jason/article/details/52891940

更多优质文章,可以微信扫码关注:
这里写图片描述

你可能感兴趣的:(Vue)