keydown vs. keypress (in JavaScript)

In my next post, I intend to discuss a validation library which performs keystroke and field level validation for HTML forms using JavaScript and regular expressions. However, before you can correctly understand how the validation works, as well as when you can test for various validation conditions, you have to recognize the different behaviors between the keydown and keypress events.

In the following text fields, type whatever you like and notice the different behaviors in the table below it.

Type here →

Event	charCode	keyCode	Display	Shifted?
Keydown
Keypress

Some notable problem keys when dealing with JavaScript keystroke validation are the arrow keys and other editing keys (delete, home, end, insert) which should be allowed in order to edit a field value, however they can appear to be punctuation symbols which may not be desired in the field. Function keys and number pad keys are also problematic.

Here are some key observations regarding keypress events:

• Firefox sends regular keys as charCodes and special keys as keyCodes


• Safari sends both charCode and keyCode for regular keys but does not issue keypress events for special keys


• Internet Explorer does not send charCodes, only keyCodes, and does not issue keypress events for special keys


• Opera does not send charCodes, only keyCodes, but also issues keypress events for special keys making it impossible to distinguish between some keys such as '-' vs. Insert and '.' vs. Delete


• Konqueror will send both charCode and keyCode for regular keys, but only keyCode for special keys