jQuery - div 上的 keydown() 在 Firefox 中不起作用

发布于 2024-08-10 10:39:19 字数 910 浏览 10 评论 0原文

我有以下示例代码，当 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>

编辑：我刚刚尝试用 keypress 和 keyup 替换 keydown ，但它们也不起作用。顺便说一句，我还确保关闭了“键入时查找”设置，以防万一。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

赤濁 2024-08-17 10:39:19

您需要为 div 提供 tabindex，以便它可以接收焦点。

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

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

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

回复收藏 0 原文

久而酒知 2024-08-17 10:39:19

我让上面的内容在 Firefox 中工作，如下所示：

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

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

一旦 DIV 明确将焦点设置在其上，关键事件就会在 Firefox 4.0.1 中正常触发

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

回复收藏 0 原文

皓月长歌 2024-08-17 10:39:19

我不认为这会起作用，因为 div 不应该接收这样的关键事件。如果您放置了在该 div 内部，并且用户按下输入本身中的某个键，该事件将冒泡到该 div 并运行您的函数。我不是 100% 确定你的项目正在做什么，所以我不知道如何给你更多建议，但即使我不应该这样做，我还是对 IE 触发 keydown 事件感到惊讶一个分区。

回复收藏 0 原文

绿阴红影里的.如风往事 2024-08-17 10:39:19

我们还可以使用这样的东西：

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

We can also use something like this:

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

回复收藏 0 原文

指尖上的星空 2024-08-17 10:39:19

您可以从这里在线查看

源代码

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

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>

回复收藏 0 原文

蛮可爱 2024-08-17 10:39:19

我无法使用 jquery 的最新 CDN 在 Firefox 5 中获得这些答案。我需要知道 div 的子级之一是否有关键事件，所以我诉诸于此：

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

如果目标是当前 div （并且它具有焦点），我想你可以这样做：

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

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 */
}

回复收藏 0 原文

隐诗 2024-08-17 10:39:19

这是因为 jQuery 版本的问题。尝试 http://code.jquery.com/jquery-latest.js 作为源

回复收藏 0 原文

给我一枪 2024-08-17 10:39:19

基本上：

在设置 'onkeydown' 事件后调用 yourElement.focus() ...
示例：

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

div.focus() // Add this

Basically:

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

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

div.focus() // Add this

回复收藏 0 原文

沙沙粒小 2024-08-17 10:39:19

这应该有效：

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

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

This should work:

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

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

回复收藏 0 原文

~没有更多了~

关于作者

友情链接

文江博客

jQuery - div 上的 keydown() 在 Firefox 中不起作用

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（9）

您可以从这里在线查看

源代码

You can check online from here

Source Code

基本上：

Basically:

关于作者

相关话题

热门标签

推荐作者

已经忘了多久

15867725375

LonelySnow

走过海棠暮

轻许诺言

信馬由缰

友情链接

jQuery - div 上的 keydown() 在 Firefox 中不起作用

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（9）

您可以从这里在线查看

源代码

You can check online from here

Source Code

基本上：

Basically:

关于作者

相关话题

热门标签

推荐作者

已经忘了多久

15867725375

LonelySnow

走过海棠暮

轻许诺言

信馬由缰

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。