jQuery keydown()事件：键盘按下的瞬间响应-代码号

前面讲了鼠标事件和表单事件，现在进入键盘事件的部分。keydown() 是三个键盘事件中触发时机最早的一个——用户在键盘上按下任意键的瞬间，keydown 事件就被触发了。注意是“按下”的瞬间，不是“松开”的时候。

jQuery 提供了三个键盘相关的事件方法：keydown()（按下触发）、keypress()（字符键按下触发）、keyup()（松开触发）。它们各有各的触发时机和适用场景，放在一起对比理解会更清楚。

语法形式

触发 keydown 事件：

$(selector).keydown()

程序化地触发 keydown 事件，让绑定的处理函数执行。

绑定 keydown 事件：

$(selector).keydown(function(event){
    // 按键按下时执行的代码
})

给选中元素绑定键盘按下事件。回调中的 event 参数包含了按键信息，比如 event.which 可以拿到按键的键码。

基础示例：按键按下和松开切换颜色

下面这个例子用 keydown() 和 keyup() 配合，直观展示了两个事件触发时机的差异。输入框在按键按下时变绿色，按键松开时变紫色。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>keydown 与 keyup 配合示例</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
    <p>在输入框中输入文字，观察背景颜色变化：</p>
    <input type="text" id="colorInput" style="padding:8px;width:260px;" placeholder="按下按键变绿，松开变紫">

    <script>
        $(document).ready(function(){
            $("input").keydown(function(){
                $("input").css("background-color", "#a9dfbf");
            });
            $("input").keyup(function(){
                $("input").css("background-color", "#d7bde2");
            });
        });
    </script>
</body>
</html>

按住一个键不放，输入框保持绿色背景；松开手指的瞬间，背景变成紫色。这个简单的颜色切换很直观地展示了 keydown 和 keyup 的触发时机差异。项目开发中很少用 keydown 来改样式，更多是用它来做快捷键响应、输入拦截或游戏操控等。

keydown 和 keypress 的区别

这是键盘事件里比较容易搞混的一对。两者的核心区别在于：

keydown 在按下任意键时都触发，包括字母、数字、功能键（F1-F12）、方向键、Ctrl、Alt、Shift、Esc 等。
keypress 只在按下能产生字符的键时才触发，功能键、方向键等不会触发 keypress。

所以如果你要监听 Ctrl+S 这样的组合快捷键，或者需要响应方向键来控制游戏角色移动，应该用 keydown，keypress 在这些场景下无效。

另外 keydown 的触发时机比 keypress 早，如果你想在字符真正输入到文本框中之前就拦截它（比如只允许输入数字），用 keydown 配合 event.preventDefault() 可以实现。

实用场景：用 keydown 检测回车键提交

一个很常见的实际用法是用 keydown 检测用户是否按了回车键。比如在搜索框中按回车自动触发搜索。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>keydown 检测回车键示例</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
    <p>在搜索框中输入关键词，按回车键执行搜索：</p>
    <input type="text" id="searchBox" placeholder="输入后按回车" style="padding:8px;width:260px;">
    <p id="searchResult" style="color:#1a5276;font-weight:bold;"></p>

    <script>
        $("#searchBox").keydown(function(event){
            if(event.which === 13){
                var keyword = $(this).val();
                $("#searchResult").text("正在搜索：" + keyword);
                // 实际项目里这里会调用 AJAX 发起搜索请求
            }
        });
    </script>
</body>
</html>

event.which 返回按键的键码，13 对应回车键。常用键码参考：回车 13、Esc 27、空格 32、方向键左 37 上 38 右 39 下 40、Tab 9。做键盘快捷键功能时，这些数字会经常打交道。

按键事件的触发顺序

如果三个键盘事件同时绑定在同一个元素上，它们的触发顺序是：

keydown —— 按键按下的瞬间
keypress —— 字符键按下时（功能键不触发）
keyup —— 按键松开的瞬间

理解这个顺序对调试键盘交互很有帮助。比如在做输入实时校验时，如果发现在 keydown 里取到的 input.val() 还是旧值，那是因为 keydown 触发在字符真正写入之前。想拿到输入后的新值，用 keyup 或者在 keydown 里加个微小的延时。

本节课程知识要点

keydown() 在用户按下键盘任意键的瞬间触发，是三个键盘事件中触发时机最早的一个。
与 keypress() 的区别：keydown 响应所有键（含功能键和方向键），keypress 只响应能产生字符的键。
与 keyup() 的区别：keydown 是按下时触发，keyup 是松开时触发。
通过 event.which 获取键码可以判断用户按了哪个键，常用于快捷键和回车提交等功能。
键盘事件触发顺序为 keydown → keypress → keyup，编写键盘逻辑时需要考虑取值的时机。

keydown() 是键盘事件体系里覆盖范围最广的一个，能捕获所有按键动作。它和 keypress()、keyup() 一起构成了完整的键盘交互监听链条。根据需求选择合适的事件方法——响应快捷键用 keydown，处理字符输入用 keypress，获取最终输入值用 keyup——这三个方法配合使用，能覆盖各种键盘交互场景。

本文标签：

jQuery keydown()事件：键盘按下的瞬间响应