2

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

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

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

我尝试将 onKeyPress 警报放在正文标签中，并且效果很好。它只是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 的方法！

谢谢！！！

亚历克斯

4

4 回答 4

6

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

于 2011-05-19T14:41:57.233 回答
4

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

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

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

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

于 2011-05-19T14:47:58.860 回答
0

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

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

于 2011-05-19T14:44:10.533 回答
0

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

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

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

另外，如果您使用此路线，我推荐

  • 测试一下。确保它可以在您关心的浏览器中运行（主要是测试 IE 7，与 8/7 兼容的不同）
  • 使用onfocusandonblur而不是onclick来改变你的颜色。如果你不关心 IE 7，你可以使用 CSS:focus来改变颜色。（像 CSS 一样工作:hover）
于 2011-05-19T14:47:58.103 回答