onKeyUp不触发ESC在IE中

onKeyUp not firing for ESC in IE

本文关键字：IE ESC onKeyUp      更新时间：2023-09-26

我有一个页面，当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下不工作。有什么办法可以解决这个问题吗?

提前感谢!

键事件不必被body捕获，但是文档或窗口可以跨浏览器工作。此外，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>

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

允许使用jQuery吗?如果是这样，那么可以使用.keyup()来完成它。

使用jQuery也意味着你通常可以把跨浏览器的担忧留给别人。

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

这实际上很简单，一个原始的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上，不需要任何加载技巧。

另外，正如人们建议你的，检查RightJS，它非常轻量级和友好，你将能够做那些事情:)

http://rightjs.org/plugins/keys

相关文章：