Подтвердить что ты не робот

JQuery - 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, и они тоже не работают. Кстати, я также убедился, что моя настройка "Найти по мере ввода" отключена на всякий случай.

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

Ответ 2

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

Ответ 3

Я получил выше, чтобы работать в 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

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

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

Ответ 5

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

Исходный код

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

Ответ 6

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

$(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 */
}