Vue学习，键盘事件监听，常用的键盘别名和编码

最新推荐文章于 2024-09-11 14:14:35 发布

原创最新推荐文章于 2024-09-11 14:14:35 发布 · 615 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #elementui

本文介绍如何在Vue中使用键盘事件监听功能，特别是如何利用@keyup.enter来触发特定操作。通过实例演示了如何捕获键盘输入并响应回车键，同时展示了如何获取按键的详细信息。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
				<script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" placeholder="按下回车提示输入" @keyup="showinfo"/>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:"#app",
			methods:{
				showinfo(e){
					console.log(e.target.value)
				}
			}
		})
		
	</script>
</html>

我们在模板创建了一个输入框用来测试监听键盘事件

@keyup是用来处理键盘事件的绑定或者用@keydown

触发后我们通过控制台打印事件的数值

测试

我们连续输入123

我们发现只要我们输入一次控制台就打印一次

我们现在要实现我们输入完成12345后通过回车确认触发事件.enter是vue为我们写好的键盘别名

常用的别名还有注意事项如下

修改代码

<input type="text" placeholder="按下回车提示输入" @keyup.enter="showinfo"/>

在keyup后面绑定触发按键

如果我们要绑定我们需要的按键进行确认

我们可以通过控制台打印按键的名字和编码去获取有几个特殊的键要配合keydown使用在图中有介绍了

修改我们的代码打印获取的值

				showinfo(e){
					console.log(e.keyCode,e.key)
					// console.log(e.target.value)
				}
			}

我们在输入框随便输入（但是键盘的有一些键是不能给获取的）