jQuery - keydown() on div not working in Firefox

jquery internet-explorer firefox events keydown

35,623

Solution 1

You need to give the div a tabindex so it can receive focus.

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

Solution 2

I got the above to work in Firefox, like this:

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

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

Once the DIV has focus set on it explicitly, key events fire just fine in Firefox 4.0.1

Solution 3

I don't expect this will work since a div is not something that should receive key events like that. If you placed an <input> inside of that div, and the user pressed a key in the input itself, the event will bubble up to the div and run your function. I'm not 100% sure of what your project is doing so I don't know how to give you more advice, but even though I shouldn't be, I'm kind of surprised that IE is firing off a keydown event on a div.

Solution 4

You can check online from here

Source Code

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

Solution 5

We can also use something like this:

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

View more solutions

35,623

Author by

Wayne Koorts

Software developer who loves learning new technologies. My (mostly) programming blog can be found here. How to be a nice editor on Stack Exchange.

Updated on July 09, 2022

Comments

Wayne Koorts almost 2 years

I have the following example code, which should pop up an alert when the div is in focus and a key is pressed. This does what I expect in IE 7, but not in Firefox 3.5.5. What am I doing wrong?

<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: I've just tried replacing keydown with keypress and keyup and those don't work either. Incidentally, I also made sure that my "Find as you type" setting is turned off just in case.

Wayne Koorts over 14 years

Fantastic! Thank you very much!
Derek 朕會功夫 over 12 years

Simply a tabindex saved my day.
Rutwick Gangurde almost 11 years

Great! Simple but elegant!
user1862764 over 10 years

Excellent Answer.. i've spent several hours trying to fix this till i found this answer... thumbs up..
minerva over 9 years

also useful for angularjs ng-keydown. <div ng-controller="TestController" ng-keydown="keyMovement($event)" tabindex="0">
whitesiroi about 5 years

@RichardGarside omg, thank you so much, I struggled for couple hours until I found your answer. If you gonna be in Tokyo - lemme know, gonna buy a bear ;)
Richard Garside almost 4 years

@whitesiroi I wish I was going to be in Tokyo soon. I love the city. I've not been since 2010, but I would love to visit again.
whitesiroi almost 4 years

@RichardGarside hi mate, I'm now in Istanbul, so if you are here - lemme know, beer is waiting for you :))