Vue之键盘事件

Posted 逗比煎饼侠

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue之键盘事件相关的知识，希望对你有一定的参考价值。

1.使用keydown触发事件

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title></title>  
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  
    <style>  
  
    </style>  
    <script src="vue.js"></script>  
    <script>  
        window.onload=function(){  
            new Vue({  
                el:\'#box\',  
                data:{  
  
                },  
                methods:{  
                    show:function(){  
                        alert(1);  
                    }  
                }  
            });  
        };  
    </script>  
</head>  
<body>  
    <div id="box">  
        <input type="text" @keydown="show">  
    </div>  
</body>  
</html>

描述：

 

按下键盘触发show方法，弹出框1.

结果：

 

 

2.按下键盘弹出事件的键码

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title></title>  
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  
    <style>  
  
    </style>  
    <script src="vue.js"></script>  
    <script>  
        window.onload=function(){  
            new Vue({  
                el:\'#box\',  
                data:{  
  
                },  
                methods:{  
                    show:function(ev){  
                        alert(ev.keyCode);  
                    }  
                }  
            });  
        };  
    </script>  
</head>  
<body>  
    <div id="box">  
        <input type="text" @keydown="show($event)">  
    </div>  
</body>  
</html>

 

 

3.keyup事件

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title></title>  
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  
    <style>  
  
    </style>  
    <script src="vue.js"></script>  
    <script>  
        window.onload=function(){  
            new Vue({  
                el:\'#box\',  
                data:{  
  
                },  
                methods:{  
                    show:function(ev){  
                        alert(ev.keyCode);  
                    }  
                }  
            });  
        };  
    </script>  
</head>  
<body>  
    <div id="box">  
        <input type="text" @keyup="show($event)">  
    </div>  
</body>  
</html>

 

4.Vue中在键盘事件后面添加键码值就可以说明是按下了哪个键

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title></title>  
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  
    <style>  
  
    </style>  
    <script src="vue.js"></script>  
    <script>  
        window.onload=function(){  
            new Vue({  
                el:\'#box\',  
                data:{  
  
                },  
                methods:{  
                    show:function(){  
                        alert(\'您按回车了\');  
                    }  
                }  
            });  
        };  
    </script>  
</head>  
<body>  
    <div id="box">  
        <input type="text" @keyup.13="show()">  
    </div>  
</body>  
</html>

 

 

4.使用键名enter

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title></title>  
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  
    <style>  
  
    </style>  
    <script src="vue.js"></script>  
    <script>  
        window.onload=function(){  
            new Vue({  
                el:\'#box\',  
                data:{  
  
                },  
                methods:{  
                    show:function(){  
                        alert(\'您按回车了\');  
                    }  
                }  
            });  
        };  
    </script>  
</head>  
<body>  
    <div id="box">  
        <input type="text" @keyup.enter="show()">  
    </div>  
</body>  
</html>

 

5.使用键名left

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title></title>  
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  
    <style>  
  
    </style>  
    <script src="vue.js"></script>  
    <script>  
        window.onload=function(){  
            new Vue({  
                el:\'#box\',  
                data:{  
  
                },  
                methods:{  
                    show:function(){  
                        alert(1);  
                    }  
                }  
            });  
        };  
    </script>  
</head>  
<body>  
    <div id="box">  
        <input type="text" @keyup.left="show()">  
    </div>  
</body>  
</html>

 

以上是关于Vue之键盘事件的主要内容，如果未能解决你的问题，请参考以下文章

Vue中监听键盘事件

Vue键盘事件的使用

vue中触发键盘事件的两种方法和如何自定义键位事件，完整代码！

Vue 事件处理 -- 事件的基本使用 & 键盘事件

Vue2.0入门系列——键盘属性和单一事件管理通信

vue键盘事件不生效