当前位置：文江博客话题详情

JavaScript internet-explorer keyboard-events

onKeyUp 在 IE 中不会触发 ESC

发布于 2024-10-29 19:37:30 字数 522 浏览 5 评论 0 原文

我有一个页面，按下 Esc 时必须关闭对话框。我为此任务编写了以下简化代码示例：

<html>
<head>
<script language="JavaScript">
function keyUpExample() {
alert('on' + event.type + ' event fired by ' + '"' + event.srcElement.id + '" ' + ' ' +        event.which) 
} 
</script>
</head>
<body id="myBody" onkeyup="keyUpExample()">
    Trying keyUp event: Press any key...
</body>
</html>

这在 Chrome 下按预期工作，但在 IE 7 下不起作用。是否有任何解决方法可以解决此问题？

提前致谢！

原文

I have a page where I have to close a dialog when Esc is pressed. I wrote the following simplified code example for this task:

<html>
<head>
<script language="JavaScript">
function keyUpExample() {
alert('on' + event.type + ' event fired by ' + '"' + event.srcElement.id + '" ' + ' ' +        event.which) 
} 
</script>
</head>
<body id="myBody" onkeyup="keyUpExample()">
    Trying keyUp event: Press any key...
</body>
</html>

This works as expected under Chrome but is NOT working under IE 7. Is there any workaround on order to cope this problem?

Thanks in advance!

分享到QQ

分享到微博

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

发布评论

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

孤城病女 2024-11-05 19:37:30

按键事件不必被正文捕获，但文档或窗口可以跨浏览器工作。此外，keyCode 会为 keyup 或 down 事件返回正确的值。

<!doctype html>
<html lang="en">
<head>
<meta charset= "utf-8">
<title>Small Page</title>
<html>
<head>
<script>
function keyUpExample(e){
    e=e || window.event;
    var  who= e.target || e.srcElement;
    alert(e.type+' caught at '+who.nodeName+ ': key #'+e.keyCode) 
}
window.onload=function(){
    document.onkeyup= keyUpExample; 
    document.body.onkeyup= keyUpExample;    
}
</script>
</head>
<body>
    Trying keyUp event: Press any key...
</body>
</html>

Key events don't have to be caught by the body, but document or window works across browsers. Also, keyCode returns the correct value for keyup or down events.

<!doctype html>
<html lang="en">
<head>
<meta charset= "utf-8">
<title>Small Page</title>
<html>
<head>
<script>
function keyUpExample(e){
    e=e || window.event;
    var  who= e.target || e.srcElement;
    alert(e.type+' caught at '+who.nodeName+ ': key #'+e.keyCode) 
}
window.onload=function(){
    document.onkeyup= keyUpExample; 
    document.body.onkeyup= keyUpExample;    
}
</script>
</head>
<body>
    Trying keyUp event: Press any key...
</body>
</html>

回复收藏 0 原文

走过海棠暮 2024-11-05 19:37:30

将 event 作为参数传递给回调，并检查 IE 的 window.event。

<html>
<head>
<script>
function keyUpExample(e) {
    e = e || window.event;
    alert('on' + e.type + ' event fired by ' + '"' + e.srcElement.id + '" ' + ' ' +        e.which) 
} 
</script>
</head>
<body id="myBody" onkeyup="keyUpExample()">
    Trying keyUp event: Press any key...
</body>
</html>

演示

element.onkeyup 参考

但是，

您最好使用一个可以消除所有丑陋的跨浏览器不一致的库。任您选择：jQuery、Prototype、YUI、Dojo、MooTools、RightJS...

Pass event as an argument to the callback, and check for window.event for IE.

<html>
<head>
<script>
function keyUpExample(e) {
    e = e || window.event;
    alert('on' + e.type + ' event fired by ' + '"' + e.srcElement.id + '" ' + ' ' +        e.which) 
} 
</script>
</head>
<body id="myBody" onkeyup="keyUpExample()">
    Trying keyUp event: Press any key...
</body>
</html>

Demo

element.onkeyup reference

However

You're better off using a library which smooths out all the ugly cross-browser inconsistencies. Take your pick: jQuery, Prototype, YUI, Dojo, MooTools, RightJS...

回复收藏 0 原文

漫漫岁月 2024-11-05 19:37:30

你可以使用 jQuery 吗？如果是这样，那么您可以使用 .keyup() 来完成它。

使用 jQuery 还意味着您通常可以将跨浏览器的担忧留给其他人。

回复收藏 0 原文

述情 2024-11-05 19:37:30

尝试

function keyUpExample(e) {
  var evt = e || event;
  alert('on' + evt.type + ' event fired by ' + '"' + ((evt.srcElement)?evt.srcElement.id:evt.target.id) + '" ' + ' ' +        ((evt.which)?evt.which:evt.keyCode)) 
}

try

function keyUpExample(e) {
  var evt = e || event;
  alert('on' + evt.type + ' event fired by ' + '"' + ((evt.srcElement)?evt.srcElement.id:evt.target.id) + '" ' + ' ' +        ((evt.which)?evt.which:evt.keyCode)) 
}

回复收藏 0 原文

み零 2024-11-05 19:37:30

它实际上非常简单，原始 JavaScript 解决方案可能看起来有点像这样，

function callback(event) {
  if (event.keyCode == 27) {
    alert('Here you go!');
  }
}

if (document.addEventListener) {
  document.addEventListener('keydown', callback, false);
} else {
  document.attachEvent('onkeydown', callback);
}

只需将其附加到 document 即可，无需任何 onload 技巧。

另外，正如人们建议的那样，请检查 RightJS，它非常轻量且友好，您将能够执行类似的操作:)

http://rightjs.org/plugins/keys

It is actually very simple, a raw JavaScript solution could look kinda like this

function callback(event) {
  if (event.keyCode == 27) {
    alert('Here you go!');
  }
}

if (document.addEventListener) {
  document.addEventListener('keydown', callback, false);
} else {
  document.attachEvent('onkeydown', callback);
}

Just attach it to the document no need for any onload trickery.

Also, as people suggested you, check RightJS, it's very lightweight and friendly, and you will be able to do things like those :)

http://rightjs.org/plugins/keys

回复收藏 0 原文

~没有更多了~