2

クリック可能なdivタグが5つあり、divには数字が入った黄色の正方形が表示されます。ユーザーが正方形をクリックすると、正方形の色が変わり、クリックした正方形が「アクティブな」正方形であることを示します（この部分正常に動作します）。次に、ユーザーは数字を押すことができるはずです。数字を押すと、divに表示される数字が押した数字に変わります！

しかし...それは機能しません！div属性として、onkeypress = "（タグのinnerHTMLを変更する関数）"があります。

テストの目的で、onkeypress = "alert（'key'）;"と書きました。それが私のjavascript関数なのか、それともonKeyPress自体なのかを確認するためのdiv属性として！しかし、アラートは表示されません！

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を変更する方法を誰かが提案できますか？

ありがとうございました！！！

アレックス

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を配置すると、keypressの値を読み取って、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 互換とは異なります)。
  • 色を変更するには、代わりにonfocusandを使用します。IE 7 を気にしない場合は、CSS を使用して色を変更できます。(CSS のように動作します)onbluronclick:focus:hover
于 2011-05-19T14:47:58.103 に答える