jQuery KeyUp() 问题答案

【问题标题】：jQuery KeyUp() IssuejQuery KeyUp() 问题
【发布时间】：2012-01-23 04:53:49
【问题描述】：

一旦用户按下“a”，按钮颜色就会改变，一旦用户释放“a”按钮，它应该再次改变。该按钮仅在按下字母“a”后才会改变颜色，而不是在释放时。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>website</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
    $(document).keyup(function(event) {
        if ( event.which == 97){
            $('.button0 input').css('color', 'rgb(0, 0, 255)');
        }
    });
    $(document).keypress(function(event) {
        if ( event.which == 97){
            $('.button0 input').css('color', 'rgb(128, 0, 0)');
        }
    });
});
</script>
<style type="text/css">
.button0 input{
    position:fixed;
    left:41px;
    top:12px;
    font-family:Arial;
    font-size:8px;
    font-weight:normal;
}
</style>
<body>
    <div class="button0">
        <input type="button" style="width: 303px;height: 165px;" value="Button"/>
    </div>
</body>
</html>

【问题讨论】：

你为什么使用keypress和keyup而不是keydown和keyup？

标签： javascript jquery html css dom

【解决方案1】：

从jQuery API page 到.keypress()：

请注意，keydown 和 keyup 提供了一个代码，指示按下了哪个键，而 keypress 指示输入了哪个字符。例如，小写字母“a”将被 keydown 和 keyup 报告为 65，但被 keypress 报告为 97。所有事件都将大写“A”报告为 65。由于这种区别，当捕捉箭头键等特殊击键时，.keydown() 或 .keyup() 是更好的选择。

因此，您需要在 keyup 处理程序中将 event.which == 97 更改为 event.which == 65。

【讨论】：

因为你的键盘上只有一个带有字符A的键，但是字符A有小写和大写版本。此处的键码和大写字符的代码相同，您可以使用ASCII chart 查找要使用的正确代码。

【解决方案2】：

当你再次做keyup时为什么需要检查keyCode..如果我理解正确那么下面的代码应该可以工作..

$(document).keyup(function(event) {
     $('.button0 input').css('color', 'rgb(0, 0, 255)');
});

DEMO这里

如果你真的想比较key并改变颜色，那么你可以做如下的事情，

在此处更新DEMO

$(document).keydown(function(event) {
    if ( event.which == 65){
        $('.button0 input').css('color', 'rgb(128, 0, 0)');
    }
}).keyup(function(event) {   
   if ( event.which == 65){
        $('.button0 input').css('color', 'rgb(0, 0, 255)');
   }
});

链接到event.which 代码列表。

【讨论】：

+1 用于匹配 keydown 到 keyup。关于keyup 上的keycode 测试，我猜这个特定问题可能无关紧要，但通常用户可以按住多个键，因此专门针对“a”键进行测试会更整洁。

【解决方案3】：

似乎 event.which 在两个函数中的含义略有不同，因为这会起作用（chrome）：

$(function() {
    $(document).keyup(function(event) {
        if ( event.which == 65){
            $('.button0 input').css('color', 'rgb(0, 0, 255)');
        }
    });
    $(document).keypress(function(event) {
        if ( event.which == 97){
            $('.button0 input').css('color', 'rgb(128, 0, 0)');
        }
    });
});

也许 jQuery 正在规范化 event.which（每个 http://api.jquery.com/event.which/）为 keyup 而不是 keypress。

【讨论】：

有什么办法可以把97转65吗？
这不是 jQuery 的事情，这是浏览器处理事件的方式。 keypress 提供与按键相关的字符，而keyup 提供键码。

【解决方案4】：

问题是，您在keyUp() 函数上听错了键，请参阅keypress() 的文档：

请注意，keydown 和 keyup 提供了一个代码来指示哪个键是按下，而 keypress 指示输入了哪个字符。为了例如，小写的“a”会被 keydown 和 keyup 报告为 65，但按按键为 97。大写的“A”被所有人报告为 65 事件。由于这种区别，当捕捉特殊击键时如方向键，.keydown() 或 .keyup() 是更好的选择。

因此，要修复您的代码，请将 keyup 事件更改为：

$(document).keyup(function(event) {
    if (event.which == 65) {
        $('.button0 input').css('color', 'rgb(0, 0, 255)');
    }
});

See it working here

【讨论】：