【Vue】Vue页面获取键盘事件

最新推荐文章于 2024-05-15 07:38:40 发布

小小2017

最新推荐文章于 2024-05-15 07:38:40 发布

阅读量1.4k

点赞数 1

分类专栏：前端文章标签： vue.js 前端

本文链接：https://blog.csdn.net/qq_41670382/article/details/125297077

版权

前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

该博客展示了如何在Vue应用中捕获并响应键盘事件，如上下左右箭头键，来改变页面元素的显示状态。通过在全局document上绑定事件监听器，而不是在特定元素上，实现了对键盘事件的捕捉。同时，博客提到了直接在Vue组件上使用键盘事件指令（如@keydown）在某些情况下可能无效的原因。

摘要由CSDN通过智能技术生成

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

一.、获取上下左右键盘事件案例

完整代码：进入界面，按上下左右键显示内容

<!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>