当前位置：首页 > news >正文

Vue基础(6)_键盘事件

news 来源：原创 2025/8/6 16:09:53

普通键盘事件

键盘事件常用的有两个：keydown、keyup。

举例：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><script type="text/javascript" src="../js/vue.js"></script><title>键盘事件</title>
</head>
<body><div id="root"><h1>{{name}}</h1><input type="text" placeholder="按下回车提示输入" @keyup = "showInfo"></div><script>// 创建Vue实例new Vue({el:'#root',data:{name:'键盘事件'},methods: {showInfo(e){// 如果按键不是Enter，把控制权返回给页面,return后面的语句将不执行。if(e.key !== "Enter") returnconsole.log(e.target.value);}},})</script>
</body>
</html>

在Vue中，为了方便，不需要亲自判断回车，只需要在键盘事件后面添加别名也能实现同样效果：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><script type="text/javascript" src="../js/vue.js"></script><title>键盘事件</title>
</head>
<body><div id="root"><h1>{{name}}</h1><input type="text" placeholder="按下回车提示输入" @keyup.enter = "showInfo"></div><script>// 创建Vue实例new Vue({el:'#root',data:{name:'键盘事件'},methods: {showInfo(e){console.log(e.target.value);}},})</script>
</body>
</html>

键盘事件

1.Vue中常用的按键别名：
回车 => enter
删除 => delete(捕获"删除"和"退格"键)
退出 => esc
空格 => space
换行 => tab(特殊，必须配合keydown去使用，不适合用keyup)
上 => up
下 => down
左 => left
右 => right

比如：

<input type="text" placeholder="按下回车提示输入" @keyup.esc = "showInfo">

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

比如：CapsLock按键的key值为CapsLock，直接添加则无效果，需要短横线命名：

<input type="text" placeholder="按下回车提示输入" @keyup.caps-lock = "showInfo">

3.系统修饰键(用法特殊):ctrl、alt、shift、meta(win键)
(1).配合keyup使用:按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
(2).配合keydown使用:正常触发事件。

比如：按下ctrl + y 才能触发：

<input type="text" placeholder="按下回车提示输入" @keyup.ctrl.y = "showInfo">

4.也可以使用keyCodes(按键码)去指定具体的按键(不推荐，因为键盘厂家不同，按键编码相同，按键可能不同)。
5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名(不推荐)。

普通键盘事件

键盘事件

相关文章：