web-dev-qa-db-fra.com

jQuery - keydown () sur div ne fonctionne pas dans Firefox

J'ai l'exemple de code suivant, qui devrait faire apparaître une alerte lorsque le div est au point et qu'une touche est enfoncée. Cela fait ce que j'attends dans IE 7, mais pas dans Firefox 3.5.5. Que fais-je de mal?

<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>

MODIFIER : je viens d'essayer de remplacer keydown par keypress et keyup et ceux-ci ne le font pas travailler soit. Soit dit en passant, je me suis également assuré que mon paramètre "Rechercher en cours de frappe" est désactivé au cas où.

jqueryinternet-explorerfirefoxeventskeydown
39
Wayne Koorts

Vous devez donner au div un tabindex afin qu'il puisse recevoir le focus.

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

J'ai obtenu ce qui précède pour fonctionner dans Firefox, comme ceci:

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

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

Une fois que la DIV s'est concentrée explicitement sur elle, les événements clés se déclenchent très bien dans Firefox 4.0.1

2
Jakob Jenkov

Nous pouvons également utiliser quelque chose comme ceci:

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

Vous pouvez vérifier en ligne d'ici

Code source

<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

Je ne m'attends pas à ce que cela fonctionne, car un div n'est pas quelque chose qui devrait recevoir des événements clés comme ça. Si vous avez placé un <input> à l'intérieur de ce div et que l'utilisateur a appuyé sur une touche dans l'entrée elle-même, l'événement se propage au div et exécute votre fonction. Je ne suis pas sûr à 100% de ce que fait votre projet, donc je ne sais pas comment vous donner plus de conseils, mais même si je ne devrais pas l'être, je suis un peu surpris que IE soit le déclenchement d'un événement keydown sur un div.

1
Jage

C'est à cause de la version jQuery. essayez http://code.jquery.com/jquery-latest.js comme source

0
Sandman

Je n'ai pu obtenir aucune de ces réponses pour fonctionner dans Firefox 5 en utilisant le dernier CDN de jquery. J'avais besoin de savoir si l'un des enfants de la div avait eu des événements clés alors j'ai eu recours à ceci:

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

Si la cible est le div actuel (et qu'il a le focus), j'imagine que vous pourriez faire quelque chose comme ceci:

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