美文网首页
快速上手jQuery键盘绑定事件

快速上手jQuery键盘绑定事件

作者: 四爷来了 | 来源:发表于2019-05-07 11:31 被阅读0次

    快速上手jQuery键盘绑定事件

    1、怎样识别键盘码keyCode?

    方法一

    网页版,有大神已经写好了,你只要敲击键盘,网页上会自动显示你所敲击的代码的keyCode,网址如下哦:
    
    http://keycode.info/
    
    

    方法二

    自给自足,自己写一个事件,获取代码:
    <script type="text/javascript" src="./jquery.js"></script>
    <script type="text/javascript">
        $(window).keydown(function (event) {
           console.log(event.keyCode)//你敲击了哪个键,打印出来的就是哪个键的键盘码
            };
        })
    
    </script>
    

    2、使用案例

    keydown事件有一个keyCode属性,可以记录你敲击的键盘的识别码,我们在绑定事件的时候也可以反向使用这个键盘码,利用判断语句,当我们敲击的键的keyCode是和我们预设的一样,那我们就让他去执行我们事先写好的代码

    请看一个简单的案例:

    <!DOCTYPE html>
    <html lang="zh-CN">
    
    <head>
        <meta charset="UTF-8">
        <title>title</title>
    </head>
    
    <body>
    </body>
    <script type="text/javascript" src="./jquery.js"></script>
    <script type="text/javascript">
        $(window).keydown(function (e) {
            switch (e.keyCode) {
                case 38:
                    alert('你敲击了UP键!');
                    break;
                case 40:
                    alert('你敲击了DOWN键!');
                    break;
                case 37:
                    alert('你敲击了LEFT键!');
                    break;
                case 39:
                    alert('你敲击了RIGHT键!');
                    break;
                default:
                    alert('哥哥,你敲错了!')
                    break;
            }
        })
    
    </script>
    
    </html>
    

    相关文章

      网友评论

          本文标题:快速上手jQuery键盘绑定事件

          本文链接:https://www.haomeiwen.com/subject/rdfiwqtx.html