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

  监听键盘事件经常需要检测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)

完整的keyCode编码表如下：




keyCode键盘编码表参考文章：
https://blog.csdn.net/Richard_Jason/article/details/52891940

更多优质文章，可以微信扫码关注：