keyboard event handling issues specific to Chrome?

programming web dev
1

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

2

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

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

3

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.

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