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

Vue-键盘事件

news 来源：原创 2025/5/18 15:35:29

键盘事件

回车事件

回车输出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)// 回车键的码 是13if(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+Ve.preventDefault(); // 阻止默认行为，例如粘贴操作console.log(e.target.value);}}},});</script>
</html>