KeyEvent Object in Firefox

JavaScript FAQ | Keyboard & Mouse Events FAQ  

Question: Doesn't the browser provide predefined contstants with key code values that I can reuse?

Answer: Firefox browsers do provide the global

KeyEvent
object with a set of predefined constants reflecting the set of keys on most widely used keyboards. The constants are named
DOM_VK_KEYNAME
, with values representing the
keydown/keyup
key codes for the respective keys. For example,
DOM_VK_SHIFT
is
16
,
DOM_VK_ESCAPE
is
27
, etc. If your target browser is Firefox, you can use these constants instead of numeric values in your
keydown/keyup
event handlers. As of 2010, other major browsers do not support the
KeyEvent
constants.

Some JavaScript programmers might want to reuse the

KeyEvent
object even outside Firefox; technically, this is easy to do by including an additional
.js
file that tests for the presence of the
KeyEvent
object in the user's browser, and defines
KeyEvent
with all its hard-coded constants if the browser does not support the object natively. However, a problem with this approach is that different browsers are not guaranteed to have exactly the same numeric values of key codes; in fact, there are quite a few differences between key codes for the same keys across browsers. For example, in Internet Explorer
DOM_VK_SEMICOLON=59
will be useless (and may cause bugs) because the numeric value of the
keydown/keyup
event.keyCode
for the semicolon key in IE is
186
, and not
59
. Thus, until all major browsers use a fully standardized set of key codes, the straightforward reuse of KeyEvent constants across browsers does not help that much.

What are the

KeyEvent
constant values? If you are using Firefox, you can easily print out all
KeyEvent
constants by executing this code in your browser:
<pre><script>for (var k in KeyEvent) {
 document.writeln('KeyEvent.' + k + ' = ' + KeyEvent[k]);
}
</script></pre>
Here is the list of
KeyEvent
constants obtained by running the above code in Firefox 3.6:
// KeyEvent constants in Firefox 3.6
KeyEvent.DOM_VK_CANCEL = 3
KeyEvent.DOM_VK_HELP = 6
KeyEvent.DOM_VK_BACK_SPACE = 8
KeyEvent.DOM_VK_TAB = 9
KeyEvent.DOM_VK_CLEAR = 12
KeyEvent.DOM_VK_RETURN = 13
KeyEvent.DOM_VK_ENTER = 14
KeyEvent.DOM_VK_SHIFT = 16
KeyEvent.DOM_VK_CONTROL = 17
KeyEvent.DOM_VK_ALT = 18
KeyEvent.DOM_VK_PAUSE = 19
KeyEvent.DOM_VK_CAPS_LOCK = 20
KeyEvent.DOM_VK_ESCAPE = 27
KeyEvent.DOM_VK_SPACE = 32
KeyEvent.DOM_VK_PAGE_UP = 33
KeyEvent.DOM_VK_PAGE_DOWN = 34
KeyEvent.DOM_VK_END = 35
KeyEvent.DOM_VK_HOME = 36
KeyEvent.DOM_VK_LEFT = 37
KeyEvent.DOM_VK_UP = 38
KeyEvent.DOM_VK_RIGHT = 39
KeyEvent.DOM_VK_DOWN = 40
KeyEvent.DOM_VK_PRINTSCREEN = 44
KeyEvent.DOM_VK_INSERT = 45
KeyEvent.DOM_VK_DELETE = 46
KeyEvent.DOM_VK_0 = 48
KeyEvent.DOM_VK_1 = 49
KeyEvent.DOM_VK_2 = 50
KeyEvent.DOM_VK_3 = 51
KeyEvent.DOM_VK_4 = 52
KeyEvent.DOM_VK_5 = 53
KeyEvent.DOM_VK_6 = 54
KeyEvent.DOM_VK_7 = 55
KeyEvent.DOM_VK_8 = 56
KeyEvent.DOM_VK_9 = 57
KeyEvent.DOM_VK_SEMICOLON = 59
KeyEvent.DOM_VK_EQUALS = 61
KeyEvent.DOM_VK_A = 65
KeyEvent.DOM_VK_B = 66
KeyEvent.DOM_VK_C = 67
KeyEvent.DOM_VK_D = 68
KeyEvent.DOM_VK_E = 69
KeyEvent.DOM_VK_F = 70
KeyEvent.DOM_VK_G = 71
KeyEvent.DOM_VK_H = 72
KeyEvent.DOM_VK_I = 73
KeyEvent.DOM_VK_J = 74
KeyEvent.DOM_VK_K = 75
KeyEvent.DOM_VK_L = 76
KeyEvent.DOM_VK_M = 77
KeyEvent.DOM_VK_N = 78
KeyEvent.DOM_VK_O = 79
KeyEvent.DOM_VK_P = 80
KeyEvent.DOM_VK_Q = 81
KeyEvent.DOM_VK_R = 82
KeyEvent.DOM_VK_S = 83
KeyEvent.DOM_VK_T = 84
KeyEvent.DOM_VK_U = 85
KeyEvent.DOM_VK_V = 86
KeyEvent.DOM_VK_W = 87
KeyEvent.DOM_VK_X = 88
KeyEvent.DOM_VK_Y = 89
KeyEvent.DOM_VK_Z = 90
KeyEvent.DOM_VK_CONTEXT_MENU = 93
KeyEvent.DOM_VK_NUMPAD0 = 96
KeyEvent.DOM_VK_NUMPAD1 = 97
KeyEvent.DOM_VK_NUMPAD2 = 98
KeyEvent.DOM_VK_NUMPAD3 = 99
KeyEvent.DOM_VK_NUMPAD4 = 100
KeyEvent.DOM_VK_NUMPAD5 = 101
KeyEvent.DOM_VK_NUMPAD6 = 102
KeyEvent.DOM_VK_NUMPAD7 = 103
KeyEvent.DOM_VK_NUMPAD8 = 104
KeyEvent.DOM_VK_NUMPAD9 = 105
KeyEvent.DOM_VK_MULTIPLY = 106
KeyEvent.DOM_VK_ADD = 107
KeyEvent.DOM_VK_SEPARATOR = 108
KeyEvent.DOM_VK_SUBTRACT = 109
KeyEvent.DOM_VK_DECIMAL = 110
KeyEvent.DOM_VK_DIVIDE = 111
KeyEvent.DOM_VK_F1 = 112
KeyEvent.DOM_VK_F2 = 113
KeyEvent.DOM_VK_F3 = 114
KeyEvent.DOM_VK_F4 = 115
KeyEvent.DOM_VK_F5 = 116
KeyEvent.DOM_VK_F6 = 117
KeyEvent.DOM_VK_F7 = 118
KeyEvent.DOM_VK_F8 = 119
KeyEvent.DOM_VK_F9 = 120
KeyEvent.DOM_VK_F10 = 121
KeyEvent.DOM_VK_F11 = 122
KeyEvent.DOM_VK_F12 = 123
KeyEvent.DOM_VK_F13 = 124
KeyEvent.DOM_VK_F14 = 125
KeyEvent.DOM_VK_F15 = 126
KeyEvent.DOM_VK_F16 = 127
KeyEvent.DOM_VK_F17 = 128
KeyEvent.DOM_VK_F18 = 129
KeyEvent.DOM_VK_F19 = 130
KeyEvent.DOM_VK_F20 = 131
KeyEvent.DOM_VK_F21 = 132
KeyEvent.DOM_VK_F22 = 133
KeyEvent.DOM_VK_F23 = 134
KeyEvent.DOM_VK_F24 = 135
KeyEvent.DOM_VK_NUM_LOCK = 144
KeyEvent.DOM_VK_SCROLL_LOCK = 145
KeyEvent.DOM_VK_COMMA = 188
KeyEvent.DOM_VK_PERIOD = 190
KeyEvent.DOM_VK_SLASH = 191
KeyEvent.DOM_VK_BACK_QUOTE = 192
KeyEvent.DOM_VK_OPEN_BRACKET = 219
KeyEvent.DOM_VK_BACK_SLASH = 220
KeyEvent.DOM_VK_CLOSE_BRACKET = 221
KeyEvent.DOM_VK_QUOTE = 222
KeyEvent.DOM_VK_META = 224

See also:

Copyright © 1996-2018, JavascriptFAQ.net.