jQuery-keydown () на div не работает в 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>

редактировать: Я только что попытался заменить keydown С keypress и keyup и они тоже не работают. Кстати, я также убедился, что моя настройка" найти как вы печатаете " отключена на всякий случай.

36
events firefox internet-explorer jquery keydown

7 ответов

вам нужно дать div tabindex, чтобы он мог получать фокус.

<div id="testdiv" tabindex="0"></div>
111

Я не ожидаю, что это будет работать, так как div-это не то, что должно получать такие ключевые события. Если вы разместили внутри этого div, и пользователь нажал клавишу в самом входе, событие будет всплывать до div и запускать вашу функцию. Я не на 100% уверен в том, что делает ваш проект, поэтому я не знаю, как дать вам больше советов, но, хотя я не должен быть, я немного удивлен, что IE запускает событие keydown на div.

2

Я получил выше, чтобы работать в Firefox, как это: 

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

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

Как только DIV имеет фокус, установленный на нем явно, ключевые события срабатывают просто отлично в Firefox 4.0.1

2

мы также можем использовать что-то вроде этого:

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

вы можете проверить онлайн отсюда

Исходный Код

<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

Я не мог получить ни один из этих ответов для работы в Firefox 5, используя последний CDN от jquery. Мне нужно было знать, есть ли у одного из детей div ключевые события, поэтому я прибегнул к этому:

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

Это из-за версии jQuery. попробовать http://code.jquery.com/jquery-latest.js Источник

0