Why does my keyboard interactivity code function properly in IE and Chrome, but not FireFox? The full code is at http://sgdk2.enigmadream.com/ben/Html5Sample.html. Feel free to download and edit the file locally to test corrections (please do in the interest of skipping over wrong answers to the right answer 🙂 ). It’s entirely self-contained 100% in the one HTML file.
For your convenience, here, I believe, is all the code involved:
var keyboardState;
keyboardState = new Object();
keyboardState.key= { None:0, Enter:13, Shift:16,
/* etc... */};
keyboardState.keyState = new Array();
keyboardState.handleKeyDown = function(e) {
e = e || window.event;
keyboardState.keyState[e.keyCode] = true;
};
keyboardState.handleKeyUp = function(e) {
e = e || window.event;
keyboardState.keyState[e.keyCode] = false;
};
keyboardState.isKeyPressed = function(key) { return keyboardState.keyState[key]; };
…
<body class="unselectable" unselectable="on"
onkeydown="keyboardState.handleKeyDown(event)"
onkeyup="keyboardState.handleKeyUp(event)">
It seems that handleKeyDown is not even firing, if I’m debugging this right. This must be pretty close to correct because it works fine in IE and Chrome.
prototype/javascript – firefox not firing keypress/keydown event unless focus is in textbox
Try binding events on document instead of body. Also: try not to use ‘onevent’ attributes, but create event listeners inside script block.