Best IT Recipes

JQuery - keydown () for not working in Firefox

I have the following code example that should trigger a warning 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 just tried replacing keydown with keypress and keyup , and they don't work either. By the way, I also made sure that my Find As You Type setting is turned off just in case.

+36
jquery firefox internet-explorer events keydown
Nov 11 '09 at 20:38
source share
7 answers

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

 <div id="testdiv" tabindex="0"></div>
+108
Nov 11 '09 at 21:00
source share

I do not expect this to work, as the div is not what should receive such key events. If you placed the <input> inside this div, and the user pressed the key for the input itself, the event will go into the div and run your function. I am not 100% sure what your project is doing, so I don’t know how to give you more advice, but although I should not be like this, I am surprised that IE is firing the keydown on div event.

+2
Nov 11 '09 at 20:53
source share

I got above to work in Firefox, for example:

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

As soon as the DIV focuses on it explicitly, the key events in FireFox are just fine.

+2
Jun 27 '11 at 18:18
source share

We can also use something like this:

 $('#tbl tbody').attr("tabindex", 1).focus(); $('#tbl tbody').keydown(function (event) { ... });
+1
Dec 31 '13 at 9:28
source share

You can check online here.

Source

 <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
May 10 '13 at 15:18
source share

I could not get any of these answers to work in Firefox 5 using the latest CDN from jquery. I needed to know if one of the divine children 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 would suggest that you can do something like this:

 $(document).keypress(function(e){ if(!$(e.target).is("#testdiv")) return; /* do div specific code here */ }
0
Jun 29 '11 at 20:24
source share

This is due to the jQuery version. try http://code.jquery.com/jquery-latest.js as a source

0
Sep 09 '11 at 9:19 a.m.
source share


More articles:


All Articles