键盘事件
回车事件
回车输出Input控件输入的内容
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘事件</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>事件修饰符</h1>
<h2> enter 回车事件</h2>
<div>
<input type="text" placeholder="按下回车提示输入的内容" @keyup="showContent">
</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示
new Vue({
el:'#root',
data:{
name:"菜逼"
},
methods: {
showContent(e){
console.log(e.keyCode)
// 回车键的码 是13
if(e.keyCode === 13){
console.log(e.target.value)
}
}
},
});
</script>
</html>
- 效果
input控件中输入内容，按下回车键控制台输出input内容
- 简写
@keyup="showContent"=>@keyup.enter="showContent"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘事件</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>键盘事件</h1>
<h2> enter 回车事件</h2>
<div>
<input type="text" placeholder="按下回车提示输入的内容" @keyup.enter="showContent">
</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示
new Vue({
el:'#root',
data:{
name:"菜逼"
},
methods: {
showContent(e){
console.log(e.keyCode)
// 回车键的码 是13
// if(e.keyCode === 13){
console.log(e.target.value)
// }
}
},
});
</script>
</html>
常见按键别名
| 中文名称 | 别名 |
|---|---|
| 回车 | enter |
| 删除/退格 | delete |
| 退出 | esc |
| 空格 | space |
| 换行 | tab(特殊，必须配合keydown去使用，不适合用keyup) |
| 上 | up |
| 下 | down |
| 左 | left |
| 右 | down |
未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名)。
- CapsLock 短横线命名：.caps-lock
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘事件</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>键盘事件</h1>
<h2> enter 回车事件</h2>
<div>
<input type="text" placeholder="按下回车提示输入的内容" @keyup.enter="showContent">
<input type="text" placeholder="按下大写提示输入" @keyup.caps-lock="showContent">
</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示
new Vue({
el:'#root',
data:{
name:"菜逼"
},
methods: {
showContent(e){
console.log(e.keyCode)
// 回车键的码 是13
// if(e.keyCode === 13){
console.log(e.target.value)
// }
}
},
});
</script>
</html>
- 效果
系统修饰键
- ctrl、
- alt
- shift
- meta(win键)
- 配合keyup使用:按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
- 配合keydown使用:正常触发事件。
ctl + a
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘事件</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>键盘事件</h1>
<h2> enter 回车事件</h2>
<div>
<label>回车</label>
<input type="text" placeholder="按下回车提示输入的内容" @keyup.enter="showContent"><br>
<label>大写</label>
<input type="text" placeholder="按下大写提示输入" @keyup.caps-lock="showContent"><br>
<label>ctrl+a</label>
<input type="text" placeholder="按下ctrl+a提示输入" @keyup.ctrl.a="showContent"><br>
</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示
new Vue({
el:'#root',
data:{
name:"菜逼"
},
methods: {
showContent(e){
console.log(e.keyCode)
// 回车键的码 是13
// if(e.keyCode === 13){
console.log(e.target.value)
// }
}
},
});
</script>
</html>
- 效果
ctrl+alt+v
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘事件</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>键盘事件</h1>
<h2> enter 回车事件</h2>
<div>
<label>回车</label>
<input type="text" placeholder="按下回车提示输入的内容" @keyup.enter="showContent"><br>
<label>大写</label>
<input type="text" placeholder="按下大写提示输入" @keyup.caps-lock="showContent"><br>
<label>ctrl+a</label>
<input type="text" placeholder="按下ctrl+a提示输入" @keyup.ctrl.a="showContent"><br>
<label>ctrl+alt+v</label>
<input type="text" placeholder="按下ctrl+alt+v提示输入" @keyup="showInfo"><br>
</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示
new Vue({
el:'#root',
data:{
name:"菜逼"
},
methods: {
showContent(e){
console.log(e.keyCode)
// 回车键的码 是13
// if(e.keyCode === 13){
console.log(e.target.value)
// }
},
showInfo(e){
if (e.ctrlKey && e.altKey && e.key === 'v') {
// 处理 ctrl+alt+V
e.preventDefault(); // 阻止默认行为，例如粘贴操作
console.log(e.target.value);
}
}
},
});
</script>
</html>
- 效果
