05_键盘事件
-
常用的键盘事件有两种,分别是
keyup
(按下后抬起触发)和keydown
(按下即刻持续触发)vue提供了常用的按键别名:
回车:
keyup.enter
删除:
keyup.delete
退出:
keyup.esc
空格:
keyup.space
换行:
keyup.tab
(必须配合keydown使用)上:
keyup.up
下:
keyup.down
左:
keyup.left
右:
keyup.right
<body> <div id="app"> <p></p> <input type="text" placeholder="按下回车提交" @keyup.enter="showInfo" /> </div> <script> const vm = new Vue({ el: '#app', methods: { showInfo() { console.log('按下了Enter键'); }, }, }); </script> </body>
-
vue未提供别名的按键使用按键原始的key值去绑定(多个按此组成的按键需要使用
-
连接才能触发):<body> <div id="app"> <p></p> <input type="text" placeholder="按下CapsLock切换大小写" @keyup.caps-lock="showInfo" @keyup.s="save" /> </div> <script> const vm = new Vue({ el: '#app', methods: { showInfo(event) { // 获取按键 // console.log(event.key, event.keyCode); console.log('按下了CapsLock'); }, save() { console.log('按下了S'); }, }, }); </script> </body>
-
vue未提供别名的按键使用按键原始的keyCode值去绑定(不推荐):
<body> <div id="app"> <p></p> <input type="text" placeholder="Q、W、E、R、Enter" @keyup="showInfo" @keyup.13="enter" /> </div> <script> const vm = new Vue({ el: '#app', methods: { showInfo(event) { // 获取按键 // console.log(event.key, event.keyCode); if (event.keyCode == 81) { console.log('按下了Q键'); } else if (event.keyCode == 87) { console.log('按下了W键'); } else if (event.keyCode == 69) { console.log('按下了E键'); } else if (event.keyCode == 82) { console.log('按下了R键'); } }, enter() { console.log('按下了Enter'); }, }, }); </script> </body>
-
系统修饰键:ctrl、alt、shift、meta(win键)
-
配合
keyup
使用:按下修饰键的同时,在按下其他键,抬起后其他键,事件才能被触发事件<body> <div id="app"> <p></p> <input type="text" placeholder="按下Ctrl+Q,抬起Q触发" @keyup.ctrl="showInfo" /> </div> <script> const vm = new Vue({ el: '#app', methods: { showInfo(event) { // 获取按键 // console.log(event.key, event.keyCode); console.log('按下了Ctrl'); }, }, }); </script> </body>
-
配合
keydown
使用:正常触发事件
-
-
Vue.config.keyCodes.自定义键名 = 键码,可以绑定别名
<body> <div id="app"> <p></p> <input type="text" placeholder="Enter" @keyup.huiche="showInfo" /> </div> <script> Vue.config.keyCodes.huiche = 13; const vm = new Vue({ el: '#app', methods: { showInfo(event) { // 获取按键 // console.log(event.key, event.keyCode); console.log('按下了回车'); }, }, }); </script> </body>
阅读剩余
THE END