web-dev-qa-db-ja.com

jQuery-divのkeydown（）がFirefoxで機能しない

Divにフォーカスがあり、キーが押されたときにアラートをポップアップする次のサンプルコードがあります。これは私がIE 7で期待していることを行いますが、Firefox 3.5.5では行いません。何が問題なのですか？

<html>
<head>
    <title>JS test</title>
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#testdiv").keydown(function(event) {
                alert("Pressed " + event.keyCode);
            });
        });
    </script>    
    <style type="text/css">
        #testdiv
        {
            width: 50;
            height: 50;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="testdiv"></div>
</body>
</html>

[〜＃〜] edit [〜＃〜]：keydownをkeypressとkeyupに置き換えてみましたが、そうではありませんどちらか動作します。ちなみに、念のため、「入力時に探す」設定がオフになっていることも確認しました。

jqueryinternet-explorerfirefoxeventskeydown
39
Wayne Koorts

Divがフォーカスを受け取ることができるように、divにtabindexを与える必要があります。

<div id="testdiv" tabindex="0"></div>
115
Richard Garside

私は上記のようにFirefoxで動作するようにしました：

$('#domainTableDiv').keydown(function(e) {
        alert(e.type + " button(" + e.which + ") ctrl(" + e.metaKey + ") alt(" + e.altKey + ") shift(" + e.shiftKey + ")" );
    });

$('#domainTableDiv').focus();

DIVが明示的にDIVにフォーカスを設定すると、Firefox 4.0.1でキーイベントが正常に起動します

2
Jakob Jenkov

次のようなものも使用できます。

$('#tbl tbody').attr("tabindex", 1).focus();
$('#tbl tbody').keydown(function (event) {
    ...
});
1
Avinash

ここからオンラインで確認できます

ソースコード

<html>
<head>
    <title>JS test</title>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#testdiv").keydown(function(event) {
                alert("Pressed " + event.keyCode);
            });
        });
    </script>    
    <style type="text/css">
        #testdiv
        {
            width: 50px;
            height: 50px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="testdiv" tabindex="0"></div>
</body>
</html>
1
Prem Kumar Maurya

Divはそのような主要なイベントを受け取る必要があるものではないため、これが機能するとは思いません。そのdiv内に<input>を配置し、ユーザーが入力自体のキーを押した場合、イベントはdivにバブルアップして関数を実行します。私はあなたのプロジェクトが何をしているのか100％確信していないので、あなたにもっとアドバイスをする方法がわかりませんが、私がそうするべきではないにしても、IEがそうであることにちょっと驚いていますdivでkeydownイベントを発生させます。

1
Jage

それはjQueryバージョンのためです。ソースとして http://code.jquery.com/jquery-latest.js を試してください

0
Sandman

Jqueryからの最新のCDNを使用して、Firefox 5でこれらの回答を機能させることができませんでした。 divの子の1人がキーイベントを持っているかどうかを知る必要があったので、これに頼りました：

$(document).keypress(function(e){
    if(!$(e.target).parents().is("#testdiv")) return;
    /* do child-of-div specific code here */
}

ターゲットが現在のdivである場合（そしてフォーカスがある場合）、次のようなことができると思います。

$(document).keypress(function(e){
    if(!$(e.target).is("#testdiv")) return;
    /* do div specific code here */
}
0
Shanimal