jQuery - div 上的 keydown() 在 Firefox 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1717897/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery - keydown() on div not working in Firefox
提问by Wayne Koorts
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?
我有以下示例代码，当 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: I've just tried replacing keydownwith keypressand keyupand those don't work either. Incidentally, I also made sure that my "Find as you type" setting is turned off just in case.
编辑：我刚刚尝试用和替换keydown，那些也不起作用。顺便说一句，为了以防万一，我还确保关闭了我的“键入时查找”设置。keypresskeyup
回答by Richard Garside
You need to give the div a tabindex so it can receive focus.
您需要给 div 一个 tabindex 以便它可以接收焦点。
<div id="testdiv" tabindex="0"></div>
回答by Jakob Jenkov
I got the above to work in Firefox, like this:
我让上述内容在 Firefox 中工作，如下所示：
$('#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
一旦 DIV 明确设置了焦点，关键事件在 Firefox 4.0.1 中触发就好了
回答by Jage
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.
我不希望这会起作用，因为 div 不是应该接收这样的关键事件的东西。如果您在该 div 内放置了一个 <input> ，并且用户在输入本身中按下了一个键，则该事件将冒泡到该 div 并运行您的函数。我不是 100% 确定你的项目在做什么，所以我不知道如何给你更多的建议，但即使我不应该，我有点惊讶 IE 正在触发一个 keydown 事件一个div。
回答by Avinash
We can also use something like this:
我们也可以这样使用：
$('#tbl tbody').attr("tabindex", 1).focus();
$('#tbl tbody').keydown(function (event) {
...
});
回答by Prem Kumar Maurya
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>
回答by Shanimal
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:
我无法使用 jquery 的最新 CDN 在 Firefox 5 中获得任何这些答案。我需要知道 div 的一个孩子是否有关键事件，所以我求助于这个：
$(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:
如果目标是当前的 div（并且它有焦点），我想你可以做这样的事情：
$(document).keypress(function(e){
if(!$(e.target).is("#testdiv")) return;
/* do div specific code here */
}
回答by Sandman
It is because of the jQuery version. try http://code.jquery.com/jquery-latest.jsas source
这是因为 jQuery 版本。尝试http://code.jquery.com/jquery-latest.js作为源
