onKeyUp not firing for ESC in IE

Question

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!

Duplicate - or at least answered here http://stackoverflow.com/questions/1160008/which-keycode-for-escape-key-with-jquery — mplungjan, Apr 05 '11 at 15:58
Internet Explorer does not fire the keypress event for the Escape key. (see http://www.quirksmode.org/js/keys.html). OnKeyDown is probably your best bet for the escape key. — nickytonline, Apr 05 '11 at 16:07

score 3 · Accepted Answer · answered Apr 05 '11 at 16:43

3

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>

answered Apr 05 '11 at 16:43

kennebec

102,654
32
106
127

except when it is is event.which – mplungjan Apr 05 '11 at 20:20
@mplungjan: No, keyCode works in all major browsers for keyup and keydown events. You only have to worry about the which property in keypress events. – Tim Down Apr 05 '11 at 21:58
@Tim Okeee - that was a revelation – mplungjan Apr 06 '11 at 07:40
*"Key events don't have to be caught by the body, but document or window works across browsers"* - do you know of any documentation for that? – Domysee Jun 24 '16 at 07:20

score 1 · Answer 2 · answered Apr 05 '11 at 15:58

1

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

answered Apr 05 '11 at 15:58

Matt Ball

354,903
100
647
710

Could you,please, specify a little bit more what should be done? I didn't understand. – Luixv Apr 05 '11 at 15:59
1

What he says is that browsers interprete events on different ways. There are a lot of library's that fix this (sometimes extremely timeconsuming) problem for you. – Apr 05 '11 at 16:02
I really appreciate a lot your effort and your code, but it is not working under IE7. – Luixv Apr 05 '11 at 16:06
1

Sorry - I don't have an easy way to test thing in IE7. Could you provide more detail? But seriously, **this is why people use jQuery.** – Matt Ball Apr 05 '11 at 16:19
HiMatt. I cn use jQuery and I am right now trying it. The point is that I cannot use an input field. I have to close a layer when ESC is pressed. – Luixv Apr 05 '11 at 16:25
1

@Luixv I would recommend asking another question with the specific jQuery code that you're trying to use. I'm not sure what you mean by "I cannot use an input field." – Matt Ball Apr 05 '11 at 16:28
Thanks Matt. I got a solution using jQuery. However the solution proposed by kennebec properly. I did +1 for you at every comment. Thanks again. – Luixv Apr 05 '11 at 16:51

score 1 · Answer 3 · answered Apr 05 '11 at 15:58

1

Are you allowed to use jQuery? If so, then you can accomplish it with .keyup().

Using jQuery also means you can generally leave the cross-browser worries to somebody else.

answered Apr 05 '11 at 15:58

Town

14,706
3
48
72

mplungjan · Answer 4 · 2011-04-05T16:13:56.373

0

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

edited Apr 05 '11 at 16:13

answered Apr 05 '11 at 16:00

mplungjan

169,008
28
173
236

Did you try it? I couldn't get running neither under IE7 nor under Chrome :-( – Luixv Apr 05 '11 at 16:11
Sorry, no. Do not have either here. However the event is event.keyCode for IE and event.which for many others. Try my edit – mplungjan Apr 05 '11 at 16:12

score 0 · Answer 5 · answered Apr 09 '11 at 08:47

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

onKeyUp not firing for ESC in IE

5 Answers5

Demo

However

Linked

Related