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 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.
编辑：我刚尝试用keypress和keyup替换keydown，那些也不起作用。顺便提一下，我还确保我的“按键同时查找”设置是关闭以防万一。
7 个解决方案
#1
111
You need to give the div a tabindex so it can receive focus.
你需要给div一个tabindex，以便它可以获得焦点。
<div id="testdiv" tabindex="0"></div>
#2
2
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中放置了，并且用户在输入中按下了一个键，则该事件将冒泡到div并运行您的函数。我不是100％肯定你的项目在做什么，所以我不知道如何给你更多的建议，但即使我不应该，我有点惊讶IE正在开启一个keydown事件一个div。
#3
2
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中正常启动
#4
1
We can also use something like this:
我们也可以使用这样的东西：
$('#tbl tbody').attr("tabindex", 1).focus();
$('#tbl tbody').keydown(function (event) {
...
});
#5
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>
#6
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:
我无法使用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 */
}
#7
0
It is because of the jQuery version. try http://code.jquery.com/jquery-latest.js as source
这是因为jQuery版本。尝试http://code.jquery.com/jquery-latest.js作为来源
#1
111
You need to give the div a tabindex so it can receive focus.
你需要给div一个tabindex，以便它可以获得焦点。
<div id="testdiv" tabindex="0"></div>
#2
2
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中放置了，并且用户在输入中按下了一个键，则该事件将冒泡到div并运行您的函数。我不是100％肯定你的项目在做什么，所以我不知道如何给你更多的建议，但即使我不应该，我有点惊讶IE正在开启一个keydown事件一个div。
#3
2
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中正常启动
#4
1
We can also use something like this:
我们也可以使用这样的东西：
$('#tbl tbody').attr("tabindex", 1).focus();
$('#tbl tbody').keydown(function (event) {
...
});
#5
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>
#6
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:
我无法使用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 */
}
#7
0
It is because of the jQuery version. try http://code.jquery.com/jquery-latest.js as source
这是因为jQuery版本。尝试http://code.jquery.com/jquery-latest.js作为来源