美文网首页
jQuery - 事件(三)之 键盘事件

jQuery - 事件(三)之 键盘事件

作者: AshengTan | 来源:发表于2016-08-08 21:44 被阅读20次

    键盘事件,元素对键盘的诸如按下、松开等事件做出反应。

    本文目录:

    1. keydown();
    2. keyup();
    3. keypress()。

    keydown(handler)

    键盘按下时执行的事件处理函数。

    参数 类型 描述
    handler Function 必选。事件触发时执行的函数。

    代码:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>事件05_keydown()</title>
        <script src="js/jquery-1.10.2.min.js"></script>
    </head>
    <body>
    <input type="text">
    <script>
        $(function () {
            $("input").keydown(function(){
                alert("keydown");
            });
        });
    </script>
    </body>
    </html>
    

    效果演示:

    keydown().gif

    keyup(handler)

    键盘松开时执行的事件处理函数。

    参数 类型 描述
    handler Function 必选。事件触发时执行的函数。

    代码:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>事件06_keyup()</title>
        <script src="js/jquery-1.10.2.min.js"></script>
    </head>
    <body>
    <input type="text">
    <script>
        $(function () {
            $("input").keyup(function(){
                alert("keyup");
            });
        });
    </script>
    </body>
    </html>
    

    keypress(handler)

    键盘按下时执行的事件处理函数。

    参数 类型 描述
    handler Function 必选。事件触发时执行的函数。

    代码:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>事件07_keypress()</title>
        <script src="js/jquery-1.10.2.min.js"></script>
    </head>
    <body>
    <input type="text">
    <script>
        $(function () {
            $("input").keypress(function(){
                alert("keypress");
            });
        });
    </script>
    </body>
    </html>
    

    关于 keydown,keypress,keyup 的区别,请看 [这里]。(http://zhidao.baidu.com/link?url=9DCbcLhcwGTqO4th68PmWrfiOzGABqcjtAiROYuedbmwbn4VApwlWj_g6Dhv5xjLjVTZWNEfKpCIlRAadSDDLZiOQ2w_FJlv8hi-bF_fa5e)

    相关文章

      网友评论

          本文标题:jQuery - 事件(三)之 键盘事件

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