window.event.keyCode how to do it on Firefox?

Question

I'm using this code to check for keydown and display the string 'Pressed' while a key is down.

<body onKeyDown="doKey(window.event.keyCode)" onKeyUp="doKey2(window.event.keyCode)">

<script>
function doKey($key) {
  document.getElementById('keydown').innerHTML='Pressed';
}

function doKey2($key) {
  document.getElementById('keydown').innerHTML='';
}
</script>

<div id="keydown"></div>

The problem is that for some reason it's only working on Chrome. I think the 'window.event.keyCode' doesn't return anything. How do I make it work at least in Firefox too? Thanks

This thing will work for u, `var key = event.keyCode || event.charCode;` — Arsman Ahmad, Apr 18 '17 at 11:29

score 22 · Answer 1 · edited May 24 '11 at 21:34

22

Some browsers have a global event object, other send the event object to the event handler as a parameter. Chrome and Internet Exlporer uses the former, Firefox uses the latter.

Some browsers use keyCode, others use charCode.

Use arguments[0] to pick up the event object sent as a parameter, and if there is no object there, there is a global object instead:

onkeydown="doKey(arguments[0] || window.event)"

In the method you can check for either keyCode or charCode

function doKey(event) {
  var key = event.keyCode || event.charCode;
  ...
}

Note the lowercase name onkeydown. If you are using XHTML event names has to be lowercase, or the browser might ignore it.

edited May 24 '11 at 21:34

PleaseStand

31,641
6
68
95

answered May 24 '11 at 21:25

Guffa

687,336
108
737
1,005

It seems that this way I am getting the keydown and keyup but the value key is always 0 instead of the corresponding keycode... Do you know what could be the problem? I tested your code here: http://www.chusmix.com/game/beta/move.php You can see the keycode on keydown but it's always 0. – lisovaccaro May 24 '11 at 21:45
@Liso22: It might be that you don't have a doctype on the page... When I run this test it in Firefox, IE, Opera, Safari and Chrome, it works: http://jsfiddle.net/U7Xpp/ – Guffa May 24 '11 at 22:11

score 14 · Accepted Answer · answered May 24 '11 at 22:04

<html>
    <body onKeyDown="doKey(event)" onKeyUp="doKey2(event)">

    <script>
    function doKey(e) {
        evt = e || window.event; // compliant with ie6        
        document.getElementById('keydown').innerHTML = evt.keyCode+' Pressed';
    }

    function doKey2(e) {
        document.getElementById('keydown').innerHTML='';
    }
    </script>

    <div id="keydown"></div>
    </body>
</html>

If we passed event as parameter, most modern browsers will work well. I have tested with Chrome 12, Firefox 4, IE 7/8/9.

score 0 · Answer 3 · answered Jun 21 '11 at 15:00

I've run into the same problem, as I'm sure thousands of coders have.

The problem is that the browsers (other than IE) don't like window.event.

I'm poking around trying to find a solution (which is how I stumbled across this), and I found the following (so far):

1) Write JQuery:

    $(document).keyup(function(e) {
        var GetKey = e.keyCode;
`enter code here` 
        }
    });

2) Redefine the key variable:

var key = (window.event) ? evt.keyCode : evt.which;

I tried the JQuery solution. It seems to be okay in FF, but I ran into an unexpected bug in IE that I'm still trying to solve. I haven't yet tried the second solution; that's next, if I can't get the JQuery to work.

window.event.keyCode how to do it on Firefox?

3 Answers3

Linked