# Vue2教程 - 8 键盘修饰符
如果有需求想在一个文本框输入完成后， 点击回车键就实现提交功能，则需要监听键盘按键。
在Vue中，键盘修饰符（Key Modifiers）是一种非常方便的方式来监听键盘事件时指定特定的按键。这些修饰符可以添加到v-on指令中，用于监听键盘上的特定按键。
在 Vue2 中可以使用两种键盘修饰符：
- 系统键盘修饰符
- 自定义键盘修饰符
# 8.1 系统键盘修饰符
当输入完密码，点击回车的时候，就触发登录方法。
<!-- 结构 -->
<template>
<div id="root">
密码: <input type="password" v-model="password" @keyup.enter="login">
</div>
</template>
<!-- 脚本 -->
<script>
export default {
name: 'App',
data() {
return {
password: ''
}
},
methods: {
login: function() {
console.log('登录');
}
},
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
在上面的代码中，@keyup.enter 中的 @keyup 表示按键抬起，.enter 表示回车键，所以@keyup.enter 表示回车键抬起时触发事件调用 login 方法。
注意，光标要在密码输入框点击回车才有效。
Vue 提供了绝大多数常用的按键码的别名：
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
还可以使用组合键：
password: <input type="password" v-model="password" @keyup.ctrl.enter="login">
1
当用户按下 Ctrl + Enter 组合键时，将会调用 login 方法。
如果想使用其他的按键，那么该怎么办呢？
可以直接使用键盘编码：
password: <input type="password" v-model="password" @keyup.16="login">
1
编码16 表示 Shift 键。回车键除了可以使用 @keyup.enter，还可以使用 @keyup.13。
但是这种用法已经被废弃了，并可能不会被最新的浏览器支持。