onKeyPress 根本不起作用！答案

【问题标题】：onKeyPress Doesnt Work At All!onKeyPress 根本不起作用！
【发布时间】：2011-05-19 14:38:50
【问题描述】：

我有 5 个可点击的 div 标签，该 div 显示一个带有数字的黄色方块。当用户点击一个方块时，方块的颜色会发生变化，表明点击的方块是“活动”方块（这部分工作正常）。然后用户应该能够按一个数字。当按下数字时，div中显示的数字应该会变成他们按下的数字！

但是...它不起作用！作为一个 div 属性，我有 onkeypress="(更改标签的 innerHTML 的函数)"。

出于测试目的，我写了 onkeypress="alert('key');"作为 div 属性来查看它是我的 javascript 函数还是 onKeyPress 本身！但警报甚至不会显示！

我尝试将 onKeyPress 警报放在 body 标记中，效果很好。它只是div！我还尝试在单击 div 之前和单击 div 之后按一个键！

我也试过onkeydown和onkeyup！

我真的看不出问题！代码如下：

<html>
<head>
<style type="text/css">
#grid {
    position:absolute;
    padding: 0;
    border:0;
    width:370px;
    height:370px;
}
.box
{
    position:absolute;
    border: 2px solid Black;
    height: 50px;
    width: 50px;
    vertical-align: middle;
    text-align: center;
    background-color: yellow;
    font-size: xx-large;
    color:Navy;
    font-family: Arial;
    margin:10px;
    line-height:1.6;
}
.boxActive
{
    background-color:Aqua;
}
</style>

<script type="text/javascript>
function clicked(id) {
    reset();
    $(id).addClass('boxActive');
}
</script>

<script type="text/javascript" src="JQuery.js"></script>

</head>
<body>
    <div id="grid">
        <div id="cell_0_0" class="box" onclick="clicked(this);" onkeypress="alert('key');" style="top:0%;  left:0%; ">0</div>
        <div id="cell_0_1" class="box" onclick="clicked(this);" onkeypress="alert('key');" style="top:0%;  left:20%; ">0</div>
        <div id="cell_0_2" class="box" onclick="clicked(this);" onkeypress="alert('key');" style="top:0%;  left:40%; ">0</div>
        <div id="cell_0_3" class="box" onclick="clicked(this);" onkeypress="alert('key');" style="top:0%;  left:60%; ">0</div>
        <div id="cell_0_4" class="box" onclick="clicked(this);" onkeypress="alert('key');" style="top:0%;  left:80%; ">0</div>            
    </div>
</body>
</html>

任何人都可以建议如何解决此问题或在用户单击 div 并按下键时更改 div 标签的 innerHTML 的方法！

谢谢！！！

亚历克斯

【问题讨论】：

标签： html onkeypress

【解决方案1】：

我最近遇到了类似的问题。我认为您需要做的是使您的 DIV 能够获得焦点。 this question 的答案应该有所帮助 - 本质上是向 DIV 添加一个 tabindex 属性。

【讨论】：

【解决方案2】：

onkeypress 仅在按下键时为“活动”字段触发。

线索是“字段”这个词——默认情况下，<div> 元素不能变为“活动”；仅输入字段。

通过将tabindex="-1" 作为<div> 中的一个属性，您可能会得到一些乐趣，但我不能保证它会起作用，而且我还没有尝试过。即使这样，您也可能必须在元素上手动 setFocus()。

（请注意，此答案的最后一部分来自 SO 上的其他地方：Is it possible to focus on a <div> using javascript focus() function?）

【讨论】：

【解决方案3】：

我认为您不能在 div 元素上使用 onkeypress 事件，因为它是容器元素而不是输入元素。

如果您将 onkeypress 放在前面描述的主体上，则可以读取按键的值以通过 id 识别 div。拥有 div 后，您可以根据需要更改样式/类。

【讨论】：

【解决方案4】：

将tabindex="0" 添加到您的 div 中。这将使其“可聚焦”。然后按键事件将起作用。

焦点和按键的工作示例：http://jsfiddle.net/nYLqA/（单击一个框并按下一个键）（颜色更改已禁用）

如果你使用tabindex="-1"，那么你将不得不点击来聚焦它。如果您使用tabindex="0"，那么单击或 tab 键将让您专注于它。

如果你使用这条路线我推荐

测试它。确保它可以在您关心的浏览器中运行（主要是测试 IE 7，与兼容 8/7 的浏览器不同）
使用onfocus 和onblur 而不是onclick 来更改颜色。如果你不关心 IE 7，你可以使用 CSS :focus 来改变颜色。（像 CSS :hover 一样工作）

【讨论】：