B

9

43

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.

Bevbevan answered 11/11, 2009 at 20:38 Comment(3)

Have you tried using keypress or keyup instead? – Padauk 11/11, 2009 at 20:44

@Matt: Just tried that and updated the question, thanks. – Bevbevan 11/11, 2009 at 20:52

<body> is also not firing keydown event and it gave me a lot of headache... – Legume 19/9, 2011 at 0:8

J

125

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

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

Janot answered 11/11, 2009 at 21:0 Comment(0)

S

3

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

Shush answered 27/6, 2011 at 18:18 Comment(0)

A

1

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.

Aeroscope answered 11/11, 2009 at 20:53 Comment(0)

T

1

We can also use something like this:

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

Tufthunter answered 31/12, 2012 at 9:28 Comment(0)

C

1

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>

Curettage answered 10/5, 2013 at 15:18 Comment(0)

S

0

I couldn't get any of these answers to work in Firefox 5 using the latest CDN from jquery. I needed to know if one of the children of the div had key events so I resorted to this:

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

If the target is the current div (and it has focus), i'd imagine you could do something like this:

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

Screak answered 29/6, 2011 at 20:24 Comment(0)

A

0

It is because of the jQuery version. try http://code.jquery.com/jquery-latest.js as source

Artie answered 9/9, 2011 at 9:19 Comment(0)

U

0

Basically:

Call yourElement.focus() after setting the 'onkeydown' event... Example:

div.onkeydown = (e) {
   alert(e.key)
   // or whatever
}

div.focus() // Add this

Unprincipled answered 25/2, 2022 at 11:20 Comment(0)

R

0

This should work:

$(document).on("keydown", "#mydiv" function(e) {
    alert('Pressed '+ e.keyCode);
});

$('#mydiv').attr('tabindex', "0")
$('#mydiv').focus();

Ruano answered 5/4, 2022 at 22:14 Comment(0)

You can check online from here

Source Code

Basically:

Recommended topics

Hot tags