原型/JavaScript - 火狐浏览器只有在文本框获得焦点时才会触发keypress/keydown事件

3

以下内容在IE6、IE7和Chrome上运行良好。但在Firefox 3.0.7上无法正常工作。

<html><head>
<script src="prototype.js" type="text/javascript" ></script>
<script type="text/javascript">
Event.observe(window, 'load', 
    function(){
        Event.observe(document.body, 'keydown', myEventHandler);
        alert('window load');
    });
function myEventHandler(evt) {
    alert(evt);
}
</script>
</head>
<body >
<input type="text" /><br><br>
</body></html>

编辑:我的意思是,在火狐浏览器中,myEventHandler没有被触发。

编辑2:此外,当焦点在输入元素上时,它可以正常工作。我希望它可以在所有按键按下时触发。

4个回答

7

我不知道为什么你的代码不能工作,但它过于复杂了 - 这应该可以解决问题:

document.observe('keydown', myEventHandler);

无需等待load,因为document立即可用。


你的代码不起作用是因为并非所有按键事件都起源于文档的元素。Opera存在类似Firefox的问题,但起源元素似乎还取决于鼠标光标的位置。

无论如何,解决方法就是在document级别捕获事件,因为只要没有人阻止它们这样做,所有DOM事件最终都会冒泡到document


谢谢,我不知道你可以这样做。我只是使用$('id').observe('keypress', function(t){if(e.keyCode==13){getTypes()}});来使按下回车键在我的文本框上运行一个函数。 - hamstar

3

我也发现类似代码在Firefox中无法触发keydown事件。在我的情况下,我只需要使用Safari和Firefox,因此我没有在IE上测试过。然而,观察“document”而不是“document.body”似乎可以解决问题:

document.observe('dom:loaded', function() {
    Event.observe(document, 'keypress', function(evt) {
       alert("In Keypress Function");
    });
});

现在,我意识到这是观察按键事件,而不是按下事件。据我所知,按键事件是在按下事件之后立即生成的。


0

顺便说一下,对于制表符、ESC键和类似的按键,你需要使用keyup而不是keypress。至少对于Safari浏览器来说,我花了很长时间才弄清楚这一点。

通过在匿名函数中添加这行代码:alert ("Key :" + evt.keyCode);,你可以自己看到。只有字形会响应。

--戴夫


0
尝试使用表单元素包装输入。如果这不起作用,请使用 div 包装它,并将处理程序附加到 div 上。

将其包装在表单中没有任何变化。将其包装在 div 中并将处理程序附加到 div,无法修复 FF 却破坏了 IE 和 Chrome。请注意,我希望事件处理程序在焦点位于输入元素中与否的情况下都能触发。 - Chloraphil

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接