jQuery keypress()事件：字符输入时的精确捕获-代码号

上一篇讲了 keydown()，它在按下任意键时都会触发。而 keypress() 的作用范围更窄一些——它只在按下能产生实际字符的键时才触发。字母键、数字键、标点符号键会触发 keypress，但方向键、Ctrl、Alt、Shift、Esc 这些功能键不会。

这个区别决定了 keypress() 的典型使用场景：专注于字符输入的监听和统计。比如做一个字数计数器，用户每输入一个字符数字就加一，用 keypress 就很合适——功能键不会干扰计数。

不过需要提一下，keypress 事件在现在开发中已经逐渐被 input 事件所取代，尤其在需要处理粘贴、剪切、拖拽等非键盘输入场景时，input 事件覆盖得更。但理解 keypress 仍然有助于看懂旧代码和在一些特定场景下精确控制键盘输入。

语法形式

触发 keypress 事件：

$(selector).keypress()

程序化地触发 keypress 事件。

绑定 keypress 事件：

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

给选中元素绑定字符按键事件。event.which 可以获取当前按下字符的 ASCII 码。

基础示例：实时统计按键次数

下面这个例子用 keypress() 实现一个简单的按键计数器。用户在输入框中每按下一个字符键，计数器就加一。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>keypress 按键计数示例</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
    <p>在输入框中输入文字，观察按键次数统计：</p>
    <input type="text" id="countInput" placeholder="请在此输入文字" style="padding:8px;width:260px;">
    <p>字符按键次数：<span id="pressCount" style="color:#c0392b;font-weight:bold;">0</span></p>

    <script>
        var pressCount = 0;
        $(document).ready(function(){
            $("input").keypress(function(){
                pressCount += 1;
                $("span").text(pressCount);
            });
        });
    </script>
</body>
</html>

在输入框中依次按下字母和数字，计数器会逐一递增。但按一下方向键或 Backspace 键，计数器不变。这就是 keypress 只响应字符键的体现。如果想要计数包括退格删除等所有按键操作，应该换 keydown。如果是做字数统计功能，这个区分很重要——删字时字数应该减少，光用 keypress 是不够的，需要结合其他事件或直接读取输入框内容长度。

keypress 和 keydown 的适用场景对比

把 keypress 和 keydown 放在一起看，选择起来就比较清晰了：

场景	推荐事件	原因
字数实时统计	`keypress` 或 `input`	只关注字符输入，不受功能键干扰
回车提交搜索	`keydown`	回车键不触发 `keypress`
方向键移动焦点	`keydown`	方向键不触发 `keypress`
组合快捷键监听	`keydown`	Ctrl、Alt 等修饰键不触发 `keypress`
输入内容实时校验	`input` 或 `keyup`	需要拿到输入后的完整值

keypress 获取输入字符

除了计数，keypress 还可以通过 event.which 获取用户按下了哪个字符。这在需要限制输入内容时很有用，比如只允许输入数字：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>keypress 限制输入示例</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
    <p>下方输入框只允许输入数字（0-9）：</p>
    <input type="text" id="numberOnly" placeholder="只能输入数字" style="padding:8px;width:260px;">
    <p id="errorHint" style="color:#c0392b;display:none;">只允许输入数字字符</p>

    <script>
        $("#numberOnly").keypress(function(event){
            var charCode = event.which;
            // 数字 0-9 的 ASCII 码范围是 48-57
            if(charCode < 48 || charCode > 57){
                $("#errorHint").show().fadeOut(1500);
                event.preventDefault(); // 阻止非法字符输入
            }
        });
    </script>
</body>
</html>

按下数字键正常输入，按下字母键会被拦截并显示提示。event.preventDefault() 在这里起到了阻止字符写入输入框的作用。不过这种拦截方式有个局限性——用户仍然可以通过右键粘贴把字母贴进去，所以完整的输入校验还需要配合 change 或 blur 事件一起做。

键盘事件的完整触发顺序

三个键盘事件绑定在同一个元素上时，触发顺序固定为：

keydown —— 按键按下瞬间
keypress —— 字符键按下时触发（功能键跳过此步）
keyup —— 按键松开瞬间

这个顺序在编码中有实际意义。比如你同时用 keydown 和 keypress 做两个不同的处理，需要注意 keydown 先执行。如果 keydown 的回调里调用了 preventDefault()，某些浏览器中 keypress 甚至不会被触发。

本节课程知识要点

keypress() 只在按下能产生字符的键时触发，功能键、方向键、修饰键不会触发此事件。
和 keydown() 的核心区别：keydown 响应所有键，keypress 只响应字符键。
通过 event.which 可获取按下字符的 ASCII 码，结合 preventDefault() 可限制输入内容。
键盘事件触发顺序为 keydown → keypress → keyup。
keypress 对非键盘输入（粘贴、拖拽）无效，需要完整输入监听时应考虑使用 input 事件。

keypress() 在三个键盘事件中定位比较专一——只关注字符输入。它和 keydown、keyup 各司其职，一个管全键按下，一个管字符输入，一个管按键松开。理解了它们各自的触发范围和顺序，键盘交互的开发思路就清晰了。键盘事件的方法到这里全部讲完，加上之前鼠标事件和表单事件的内容，jQuery 的事件体系已经覆盖了页面交互的主要维度。

本文标签：

jQuery keypress()事件：字符输入时的精确捕获