vue监听键盘，直接用@绑定就可以，而且vue为几个常用的按键提供了别名，不用去查询按键的keycode
全部的按键别名
.enter
.tab
.delete (捕获“删除”和“退格”键)
立即学习“前端免费学习笔记（深入）”；
.esc
.space
.up
.down
.left
.right
一、input标签绑定esc键
<template></template> 中绑定事件
<input type="text" @keyup.esc="KeyUpEsc">
<script></script>中定义事件
KeyUpEsc:function(){
alert("监听到esc键")
}功能效果图
二、使用element组件库的el-input标签，绑定delete键
<template></template> 中绑定事件
<el-input v-model="input" placeholder="请输入内容" @keyup.delete.native="KeyUpDelete"></el-input>
为什么这次绑定事件多一个.native修饰符，这个可能是因为element-ui封装了个div在input标签外面，把原来的事件隐藏了，所以如果不加.native的话，按键不会生效
<script></script>中定义事件
KeyUpDelete :function(){
alert("监听到delete键")
},
三、上面两种实现效果是当input标签获取到焦点的时候，才能监听到键盘，下面这种是全局监听enter键，是把监听事件绑定到document上（登录页面常用）
created: function() {
var _this = this;
document.onkeydown = function(e) {
let key = window.event.keyCode;
if (key == 13) {
_this.submit();
}
};
}, methods: {
submit: function() {
alert("监听到enter键");
},
}效果图如图所示
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
847
