0

I am building a program in JavaScript. While I tried to add keyevents, but when I was done and tried to move my object it didn't move. I tried to figure out what the problem was while I tried to move a object (with x and y coordinate system for example(y[1] += 5;)). Therefore I did try to see so the keycode was right. I made a function to see the keyCode:

window.addEventListener( "keypress", doKeyDown, false );   
 
function doKeyDown(e) {
    alert( e.keyCode )
}

Then I tried to press any button to see the keycode but every button is saying "0", unless arrow up, down, right, left. They are telling me the same value as on this website: http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes but as I said for example "W" "A" "S" "D" just tell me "0" as the keycode and I wounder why.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Robin Andersson
  • 87
  • 2
  • 11
  • it is working fine, see it here.....http://jsbin.com/uqonex/1/. Create a fiddle/jsbin to reproduce the problem. which browser you're using, i've tested in chrome ? – Piyuesh Apr 26 '13 at 16:35

3 Answers3

1

Use charCode instead of keyCode for characters.

The charCode property is holding the ascii of the character you can use to retrieve the pressed letter with String.fromCharCode.

Keycodes and charcodes are different things and you can use this difference to determine if the user typed a character or accomplished an action such as when using arrows.

atondelier
  • 2,424
  • 15
  • 11
  • 2
    Perhaps you could give some reason to clarify your answer, as both of these properties exist in the key event. – Xotic750 Apr 26 '13 at 16:48
0

You should (in some styling opinions) declare your function before using it in your event listener, although all browsers will hoist this, it will give you errors if you use jslint though.

'doKeyDown' was used before it was defined.

Here is one of many answers giving information of the above: JSLint: Using a function before it's defined error

Here is an example, on jsfiddle

<input id="input" type="text"></input>

console.log("W", "W".charCodeAt());

function logIt(evt) {
    console.log(String.fromCharCode(evt.charCode), evt.charCode);
}

var input = document.getElementById("input");

input.addEventListener("keypress", logIt, false);

You may also want to take a read of the following answer, there are others, regarding different event types keypess and keydown, and the properties charCode and keyCode:

JavaScript KeyCode vs CharCode

Community
  • 1
  • 1
Xotic750
  • 22,914
  • 8
  • 57
  • 79
  • 1
    ***Every*** browser in existence will hoist the function to the top, as that is a property of a function declaration (http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html). – Matt Apr 26 '13 at 16:51
  • I have improved my wording. – Xotic750 Apr 26 '13 at 16:56
0

Use window.addEventListener("keydown", doKeyDown, false); instead. It will report the keycodes listed on the page you linked. Otherwise, the keycodes are different.

The 'keydown' event reports a key code for any key pressed and is case-insensitive.

  • 'e' = 69 and 'E' = 69
  • '[Num Lock]' = 144
  • '[Backspace]' = 8

The 'keypress' event appears to only report key presses for printable characters (carriage return included) and the key code is then also case sensitive.

  • 'e' = 101 and 'E' = 69
  • '[Num Lock]' has no value.
  • '[Backspace]' has no value.

Here's a JS Fiddle example showing the values reported by both events.

This was tested in Chrome

XNargaHuntress
  • 751
  • 6
  • 11
  • Perhaps you could give some further clarification your answer, as both of these events exist and at first sight appear to do the same thing, – Xotic750 Apr 26 '13 at 17:04
  • Edited to provide further description of both events and examples of the values reported by the events. – XNargaHuntress Apr 26 '13 at 17:16
  • Is there any chans that i can have both press and down. For example `document.onkeypress = keyPressed; document.onkeyup = keyReleased; document.oncharpress = keyPressed1; document.oncharup = keyReleased1;` – Robin Andersson Apr 26 '13 at 17:50
  • If I'm understanding correctly, you're asking if you can listen to both events? If so, then yes. [The Fiddle I linked to in the answer](http://jsfiddle.net/XGundam05/9Dvpt/) is listening to both `keypress` and `keydown` events. – XNargaHuntress Apr 26 '13 at 18:21