JQuery学习笔记之按键按下和弹起事件

最新推荐文章于 2026-03-30 18:06:29 发布

原创最新推荐文章于 2026-03-30 18:06:29 发布 · 1w 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

本文介绍了一个使用jQuery实现的简单示例，演示了如何在网页中为输入框绑定按键按下(keydown)、按键弹起(keyup)及获取字符(keypress)事件，同时通过按钮触发按键弹起事件来改变输入框背景色。

html代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript" src="jquery-3.1.0.js"></script>
    <script type="text/javascript" src="JavaScript.js"></script>
</head>
<body>

    <!-- 按键按下和弹起事件：按键指键盘上的任意按键。 -->

    <button>按钮</button><br/>
    <form>
        <input type="text" name="txt"/>
    </form>
    <p>按键次数：<span></span></p>
</body>
</html>

JQuery代码：

$(document).ready(function () {
    $(":text").keydown(function () {    // 按键按下时触发的事件；
        $(":text").css("background-color", "green");
    });

    $(":text").keyup(function () {      // 按键弹起时触发的事件；
        $(":text").css("background-color", "blue");
    });

    $("button").click(function () {
        $(":text").keyup();             // keyup()方法触发keyup事件；
    });

    var i = 0;
    $(":text").keypress(function () {   // keypress：输入框每获取一个字符，就触发一次该事件。
        $("span").text(i++);
    });
});