一 、键盘事件简介
键盘事件顺序
keydown → keypress → keyup
二、案例
①index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- cdn是一种引入 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 这里用link印入 -->
<link rel="stylesheet" href="styles.css">
<title>vue-cdn</title>
</head>
<body>
<div id="vue-app">
<h1>键盘事件</h1>
<label>姓名</label>
<!-- 键盘按下事件：keydown() 是在键盘按下就会触发，keydown 事件触发在文字还没敲进文本框，这时如果在 keydown 事件中输出文本框中的文本，得到的是触发键盘事件前的文本，
键盘弹起事件：keyup() 是在键盘松手就会触发，触发时整个键盘事件的操作已经完成，获得的是触发键盘事件后的文本
加.enter是还要再按了enter再触发这个事件 -->
<input type="text" v-on:keydown.enter="logName" />
<label>年龄</label>
<!-- .alt.enter是要按alt键+enter键才能触发 -->
<input type="text" v-on:keyup.alt.enter="logAge" />
</div>
</body>
<script src="app.js"></script>
</html>
②对应的js文件：
app.js
new Vue({
el: "#vue-app",
data() {
return {
};
},
methods: {
logName() {
console.log('正在输入名字');
},
logAge() {
console.log('正在输入年龄');
}
}
})
补充：
// 回车事件
<input @keyup.enter="submit">
<!-- 按下Alt + 释放C触发 -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
<el-input v-model="form.name" placeholder="昵称" @keyup.enter="submit"></el-input>