zoukankan      html  css  js  c++  java
  • 键盘事件

    这个来讲一下键盘事件,按键事件

    * 键盘事件:
    * onkeydown --按键被按下
    * 对于onkeydown来说如果一直按着某个按键不松手,则事件会一直触发
    * 当onkeydown连续触发时,第一次和第二次之间会间隔稍微长一点,其他都比较快
    *
    * onkeyup -- 按键被松开
    *
    * 键盘事件一般都会绑定给一些可以获取焦点的对象或者document
    */

    话不多说,代码上

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript">
                window.onload = function(){
                    /*
                     * 键盘事件:
                     * onkeydown  --按键被按下
                     * 对于onkeydown来说如果一直按着某个按键不松手,则事件会一直触发
                     * 当onkeydown连续触发时,第一次和第二次之间会间隔稍微长一点,其他都比较快
                     * 
                     * onkeyup  -- 按键被松开
                     * 
                     * 键盘事件一般都会绑定给一些可以获取焦点的对象或者document
                     */
                    document.onkeydown = function(event){
                        /*
                         * 可以通过keycode获取按键的编码,可以知道哪个按键被按下了。
                         * 除了keycode,事件对象还提供了几个属性,
                         * altkey,ctrlkey,shiftkey
                         * 这三个来判断alt,ctrl和shift键是否被按下。
                         */
                        event = event || window.event;
                        var code = event.keyCode
                        
                        //判断y是否被按下
                        if (code === 89 || event.shiftKey){
                            console.log(code)
                        }
                    }
                    //接下来给input设置
                    input1 = document.getElementsByTagName("input")[0]
                    input1.onkeydown = function(event){
                        event = event || window.event;
                        console.log(event.keyCode)
                        //禁止文本框输入数字
    //                    if (event.keyCode>=48 && event.keyCode <=57) {
    //                        return false
    //                        
    //                    }
    
                        return false;
                };
                }
            </script>
        </head>
        <body>
            <input type="text"/>
        </body>
    </html>
  • 相关阅读:
    cmake vs qmake
    Flutter安装过程中遇到的问题
    外观模式(c++实现)
    原型模式(c++实现)
    我敢说 80% 的程序员都掉进了「老鼠赛跑」的陷阱
    装饰模式(c++实现)
    Kubernetes 部署 Nebula 图数据库集群
    应用 AddressSanitizer 发现程序内存错误
    前端 Docker 镜像体积优化
    图数据库设计实践 | 存储服务的负载均衡和数据迁移
  • 原文地址:https://www.cnblogs.com/caicaihong/p/9330836.html
Copyright © 2011-2022 走看看