Question

我有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的方法！

三江源!!!

亚历

Answer 1

仅当按下某个键时，

onkeypress才会触发“有效”字段。

线索中有“字段”一词 - 默认情况下，<div>元素不能变为“有效”;只输入字段。

tabindex="-1"中的<div>作为属性可能会让您感到高兴，但我不能保证它会起作用，我还没有尝试过。即使这样，您也可能需要在元素上手动setFocus()。

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

Answer 2

我最近遇到了类似的问题。我认为你需要做的是让你的DIV得到关注。 this question的答案应该有所帮助 - 实际上是为DIV添加了tabindex属性。

Answer 3

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

如果您将onkeypress放在身体上，如前所述，您可以读取按键的值以识别div的ID。一旦你有了div，你就可以根据需要改变样式/类。

Answer 4

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

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

如果您使用tabindex="-1"，则必须单击以对焦。如果你使用tabindex="0"，那么点击或标签键将让你专注于它。

如果您使用此路线，我建议

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

onKeyPress根本不起作用！

4 个答案: