Vue监听键盘回车事件@keyup.native和@keyup.enter.native
在监听键盘事件时,我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:只有在 key 是 Enter 时调用 vm.submit()<input v-on:keyup.enter="submit">可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。<input v-on:ke...
·
在监听键盘事件时,我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:
只有在 key
是 Enter
时调用 vm.submit()
<input v-on:keyup.enter="submit">
可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。
<input v-on:keyup.page-down="onPageDown">
按键码
keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持。
使用 keyCode 特性也是允许的:
<input v-on:keyup.13="submit">
为了在必要的情况下支持旧浏览器,Vue 提供了绝大多数常用的按键码的别名:
- .enter
- .tab
- .delete(捕获删除或者“退格键”)
- .esc
- .space
- .up
- .down
- .left
- .right
有一些按键(.esc以及所有的方向键)在IE9中有不同的key值,如果你想支持IE9,这些内置的别名应该是首选:
还可以通过config.keyCodes对象自定义按键修饰符别名
键盘回车事件导致页面刷新的问题
先在form表单加上@submit.prevent.native , 然后在所需要操作的input加上@keyup.enter.native和onsubmit="false"
即可。
更多推荐
已为社区贡献1条内容
所有评论(0)