Vue.js：键盘事件中的按键名和按键修饰符

寒来暑往秋收冬藏

已于 2022-05-11 22:43:03 修改

阅读量792

点赞数 1

分类专栏： Vue 文章标签： vue.js javascript 前端前端框架开发语言

于 2022-05-07 16:35:07 首次发布

本文链接：https://blog.youkuaiyun.com/qq_58946786/article/details/124633802

版权

Vue 专栏收录该内容

8 篇文章

订阅专栏

这篇博客介绍了Vue.js中如何使用内置的按键别名以及自定义按键修饰符来处理键盘事件，强调了keyCode的废弃，并给出了使用@keyup.enter和@keyup.esc等示例代码，教导开发者如何优雅地监听和响应特定按键操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

按键名

keyCode 的事件用法已经被废弃了，并可能不会被最新的浏览器支持，而且有一些按键在IE9中有不同的key值，所以推荐内置的别名

Vue 提供了绝大多数常用的按键码的别名:

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

还可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

// CV于官网，自己暂时没用到
// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

按键修饰符

@keyup.按键名 - 监测回车按键
@keyup.按键名 - 监测返回按键

语法： @键盘事件.按键修饰符="methods里的函数名"

<template>
  <div>
    <input type="text" @keydown.enter="enterFn">
    <hr>
    <input type="text" @keydown.esc="escFn">
  </div>
</template>

<script>
export default {
 methods: {
   enterFn(){
     console.log("按enter键了");
   },
   escFn(){
     console.log("按esc键了");
   }
 }
}
</script>