# keyboard event handling issues specific to Chrome?

**URL:** <https://forum.kirupa.com/t/keyboard-event-handling-issues-specific-to-chrome/636538>\
**Category:** web dev\
**Created:** [May 2, 2017, 6:08am UTC](https://forum.kirupa.com/t/keyboard-event-handling-issues-specific-to-chrome/636538 "2017-05-02T06:08:50Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![jekillen](https://avatars.discourse-cdn.com/v4/letter/j/b4bc9f/32.png) [@jekillen](https://forum.kirupa.com/u/jekillen)\
**Post date:** [May 2, 2017, 6:08am UTC](https://forum.kirupa.com/t/keyboard-event-handling-issues-specific-to-chrome/636538/1 "2017-05-02T06:08:50Z")

</div>

Hello again; Let me start by saying that I don’t really like posting about these issues,  
but I am having an issue with key board events specific to the Chrome browser.

Mac OSX Yosemite, Chrome version 57.0.2987.133 (64 bit)

1: it produces different codes for keydown than Firefox and Safari.  
2: in switch blocks around keyCode, I can do fall through cases for both  
types of values for the same character, specifically digits, 0-9.  
3: Chrome refuses to process the case for 0 and 9. I put alert dialog in the  
case processing and it does not come up in Chrome.

for example:  
in keydown handler:  
switch(keyCode.toString())  
{  
case ‘96’: //#0 in Firefox/Safari  
case ‘48’: //#0 in Chrome  
alert(‘Hello?’) // Chrome will not show this alert  
break;  
}

There is no way that I know of to query a specific browser vender to raise this type  
of issue. So I do it here. I have also found bugs in Safari, of a different type.

Does anyone have experience with this and a workaround?

Thank you for time and attention.  
JK

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [May 2, 2017, 4:02pm UTC](https://forum.kirupa.com/t/keyboard-event-handling-issues-specific-to-chrome/636538/2 "2017-05-02T16:02:17Z")

</div>

The forums purely exist to help with these sorts of issues, so it’s all good 😛

You mention that the `keyCode` is different between the various browsers for the same key. In a quick test, I am seeing them behave consistently. Here is my code:

```
document.body.addEventListener("keydown", keyPressed, false);

function keyPressed(e) {
  console.log(e.keyCode);
}

```

For the 0 key, Safari, Chrome, Firefox, and Edge all returned the value of 48. For a handful of random keys I pressed, the order and value of the keys was identical as well.

Can you share an example of your page to see if there is some weird compatibility mode that is being set? **_Many_** years ago, the value returned for `keyCode` (or `charCode`) between the various browsers was different.

Cheers,  
Kirupa

---

<div class="post-metadata">

**Author:** ![jekillen](https://avatars.discourse-cdn.com/v4/letter/j/b4bc9f/32.png) [@jekillen](https://forum.kirupa.com/u/jekillen)\
**Post date:** [May 2, 2017, 5:35pm UTC](https://forum.kirupa.com/t/keyboard-event-handling-issues-specific-to-chrome/636538/3 "2017-05-02T17:35:03Z")

</div>

I am having local networking and internet connection issues with  
ftp access to my web site for the moment. Hopefully I will get that  
solved soon. When I do, I can post the current state of the application.  
It is a calculator app with some features that I have not seen in calculator  
apps.

I can post the source code file containing the keyboard event handling  
code. How would I include a plain text code source file here?

In breif: all the keyboard event handlers begin with

var registerKeyPress = function(event)  
{  
var e = event || window.event  
keyNum = e.keyCoce || e.charCode || event.which  
keyNum = keyNum.toString()  
switch(keyNum)  
{  
// … etc …  
}  
}

var registerKeyDown = function(event)  
{  
var e = event || window.event  
keyNum = e.keyCoce || e.charCode || event.which  
keyNum = keyNum.toString()  
switch(keyNum)  
{  
// … etc …  
}  
}

var registerKeyUp = function(event)  
{  
var e = event || window.event  
keyNum = e.keyCoce || e.charCode || event.which  
keyNum = keyNum.toString()  
switch(keyNum)  
{  
// … etc …  
}  
}

The keypress handler is for executing code according to the  
key pressed  
The kedown and keyup handlers are for swapping img source  
values for key pad images.

I think I see a reason for the problem I am having, as I compose this…  
the variable keyNum is defined in the broader scope and not in the  
local scope of the handler, so may be acting as a static variable somehow.

These function are defined inside of a constructor function. Also inside  
the constructor function is defined keyNum, but outside of the event  
handling functions.

The “SP” key is for space so space can be entered into input string.  
“use key pad” is to activate keyboard event processing in addition to  
mouse click, over and out to enter characters.

 ![](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/d/dc51cfa69ee6ae2f5e9d304e7a8f5aba12940e3f.png)

Further investigation: I tried the snippet of code offered\* and what I am getting are literal characters  
not character codes.  
\*  
document.body.addEventListener(“keydown”, keyPressed, false);

function keyPressed(e) {  
console.log(e.keyCode);  
}

As far as older browsers returning different codes for keyCode and charCode, that is what I was  
allowing for in the original application code.

I have the app in its current state: far from complete, but up enough to demonstrate  
[http://www.jekillen.com/dev/web\_calculator](http://www.jekillen.com/dev/web_calculator)