Vue监听键盘回车事件@keyup.native和@keyup.enter.native

在监听键盘事件时,我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:

只有在 keyEnter 时调用 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"
即可。
  • 6
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值