jQuery - keydown () на div не работает в Firefox - PullRequest
Новая
       294

jQuery - keydown () на div не работает в Firefox

37 голосов
/ 11 ноября 2009

У меня есть следующий пример кода, который должен выдать предупреждение, когда 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, и они тоже не работают. Кстати, я также позаботился о том, чтобы моя настройка «Поиск по мере ввода» была отключена на всякий случай.

Ответы [ 7 ]

112 голосов
/ 12 ноября 2009

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

<div id="testdiv" tabindex="0"></div>
2 голосов
/ 27 июня 2011

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

ключевые события запускаются очень хорошо.
1 голос
/ 10 мая 2013

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

Исходный код 

<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 голос
/ 31 декабря 2012

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

$('#tbl tbody').attr("tabindex", 1).focus();
$('#tbl tbody').keydown(function (event) {
    ...
});
1 голос
/ 11 ноября 2009

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

0 голосов
/ 09 сентября 2011

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

0 голосов
/ 30 июня 2011

Я не смог заставить ни один из этих ответов работать в 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 */
}
...