vue.js 重学笔记(9)-- keyup.enter.tab .esc space键盘事件处理技巧

it2023-01-13  52

背景 如何监听用户输完文本时按下键盘回车键?

可以在vue使用v-on监听键盘事件的时候添加按键修饰符

<body> <div id="app"> <input v-on:keyup.enter="submit" /> </div> <script type="text/javascript"> let vm=new Vue({ el:'#app', data:{ }, methods:{ submit:function(value){ console.log("哟哟"); }, } }); </script>

当用户输完文本的时候,只有按下enter键的时候,控制台才会输出"哟哟"。

以下是常见的按键修饰符

.enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right .ctrl .alt .shift

问题:如何监听按下其他键,如a键?

解决方法,除了用相应的单词,我们可以参考键盘键值表

根据键值表的值,我们可以看到此时a对应的简直是65,因此,我们可以将enter该为65

<body> <div id="app"> <!-- 此处修改--> <input v-on:keyup.65="submit" /> </div> <script type="text/javascript"> let vm=new Vue({ el:'#app', data:{ }, methods:{ submit:function(value){ console.log("哟哟"); }, } }); </script>
最新回复(0)