Vue键盘事件

最新推荐文章于 2025-06-23 23:32:28 发布

李公子丶

最新推荐文章于 2025-06-23 23:32:28 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue2学习笔记文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/qq_54527592/article/details/119110082

Vue2学习笔记专栏收录该内容

48 篇文章

订阅专栏

本文介绍Vue中处理键盘事件的方法，包括常用按键别名、系统修饰键的使用方式、自定义按键别名及推荐的绑定按键方式。

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

1.Vue中常用的按键别名：

回车 => enter

删除 => delete (捕获“删除”和“退格”键)

退出 => esc

空格 => space

换行 => tab (特殊，必须配合keydown去使用)

上 => up

下 => down

左 => left

右 => right

2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

3.系统修饰键（用法特殊）：ctrl、alt、shift、meta

(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。

(2).配合keydown使用：正常触发事件。

4.也可以使用keyCode去指定具体的按键（不推荐）

5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>键盘事件</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		Vue.config.keyCodes.huiche = 13 //定义了一个别名按键

		new Vue({
			el:'#root',
			data:{
			},
			methods: {
				showInfo(e){
					// console.log(e.key,e.keyCode)
					console.log(e.target.value)
				}
			},
		})
	</script>
</html>