jQuery(3)——jQuery键盘事件

最新推荐文章于 2024-07-31 10:58:42 发布

人生莫如饥荒

最新推荐文章于 2024-07-31 10:58:42 发布

阅读量2.5k

点赞数 2

分类专栏： jQuery学习文章标签： jQuery keydown keyup keypress which

本文链接：https://blog.csdn.net/qq_32953185/article/details/82896809

版权

jQuery学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

jQuery键盘事件

- keydown

在键盘上按下某键时发生，一直按着则会不断触发（opera浏览器除外），它返回的是键盘代码;

- keyup

用户松开某一个按键时触发，与keydown相对，返回键盘代码.

- keypress

在键盘上按下一个按键，并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符，所以监听无效，换句话说，只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。

经常配合这些方法使用的是 which 属性

which

which 属性指示按了哪个键或按钮。

一个demo，熟悉keydown，keyup，keypress和which的联系。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>jQuery键盘事件学习</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script>
    $(document).ready(function(){
        $("body").keydown(
            function(event){
                $("#right").append("keydown <br>");
                $("#left").append(String.fromCharCode(event.which)); //打印字母
                //$("#test").append(event.which+"<br>");    //输出ASCII码
               //alert(event.which)
            }
        );
        $("body").keyup(
            function(event){
                $("#right").append("keyup <br>");
            }
        );
        $("body").keypress(
            function(event){
                $("#right").append("keypress <br>");
            }
        );
    })
    </script>
    <style>
    #main{
        width:800px;
        height: auto;
        margin:0 auto;
        border:2px solid green;
        overflow: hidden;
    }
    #left,#right{
        width: 396px;
        height: 300px;
        background-color: rgb(245, 172, 76);
        border:2px solid yellow;
        word-wrap:break-word;
    }
    #left,#right{
        float:left;
    }
    #right{
        overflow: auto;
    }
    </style>
</head>
<body>
    <div id="main">
        <div id="left"></div>
        <div id="right"></div>
    </div>
</body>
</html>

在线预览：
按几个字符键位测试

width="100%" height="300" scrolling="no" title="jQuery键盘事件" src="//codepen.io/liantao/embed/gBbMoB/?height=300&theme-id=34712&default-tab=js,result&embed-version=2" allowfullscreen="true">See the Pen jQuery键盘事件 by 练涛 ( @liantao) on CodePen.

See the Pen jQuery键盘事件 by 练涛 (@liantao) on CodePen.