提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
Vue直接界面获取键盘事件
一.、获取上下左右键盘事件案例
完整代码:进入界面,按上下左右键显示内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>day1</title>
<script src="js/vue.js"></script>
<script>
window.onload=function(){
var vm=new Vue({
el:'#itany',
data:{
front1:false,
bottom1:false,
left1:false,
right1:false
},
created(){
this.keydown();
}
,
methods:{
keydown(){
document.onkeydown = function(e) {
let key = window.event.keyCode;
console.log(key);
if (key==38) {
vm.front1=true;
}
if (key==40) {
vm.bottom1=true;
}
if (key==39) {
vm.right1=true;
}
if (key==37) {
vm.left1=true;
}
}
}
}
});
}
</script>
</head>
<body>
<div id="itany">
<div v-show="front1">上</div>
<div v-show="bottom1">下</div>
<div v-show="left1">左</div>
<div v-show="right1">右</div>
</div>
</body>
</html>
注:因为不是输入框,无法获得焦点,所以如下方所示,直接想在控件上绑定键盘事件,是没有响应的
<!--无法实现的方式-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>day1</title>
<script src="js/vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#itany',
data:{
front1:false,
bottom1:false,
left1:false,
right1:false
}
});
}
</script>
</head>
<body>
<div id="itany">
<div v-show="front1" @keydown.up="front1=true">上</div>
<div v-show="bottom1" @keydown.down="bottom1=true">下</div>
<div v-show="left1" @keydown.left="left1=true">左</div>
<div v-show="right1" @keydown.right="right1=true">右</div>
</div>
</body>
</html>
二、键盘按键与对应数字
见下方超链接