zoukankan      html  css  js  c++  java
  • 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>  
  • 相关阅读:
    [C#]LDAP验证用户名和密码
    如何为 Go 设计一个通用的日志包
    使用 Go 的 struct tag 来解析版本号字符串
    Referrer Policy 介绍
    《计算机操作系统》MOOC笔记1-计算机系统概论
    C语言的Bit fields
    【转】gcc编译优化---likely()与unlikely()函数的意义
    三向切分的快速排序
    Codeforces Round #334 (Div. 2) C. Alternative Thinking
    基于相邻元素交换的排序算法的下界
  • 原文地址:https://www.cnblogs.com/chaofei/p/7706806.html
Copyright © 2011-2022 走看看