Javascript Keystrokes

Detecting Keyboard Codes with Javascript

Javascript is frequently used on client side browsers to perform simple tasks that would otherwise require a full postback to the server. In many cases, it is necessary to know the keyboard code associated with characters and/or text that is entered into a form element on a web page in order to process the request. If you would like to use this code, simply click on code box to copy the code to clipboard.

  1. /*  Filename: keycodes.js
  2. ----------------------------------------*/
  3. var keycodes = new Array();
  4.  
  5. function get_keyboard_codes() {
  6.     keycodes = {
  7.         8   : "backspace",
  8.         9   : "tab",
  9.         13  : "enter",
  10.         16  : "shift",
  11.         17  : "ctrl",
  12.         18  : "alt",
  13.         19  : "pause/break",
  14.         20  : "caps lock",
  15.         27  : "escape",
  16.         33  : "page up",
  17.         34  : "page down",
  18.         35  : "end",
  19.         36  : "home",
  20.         37  : "left arrow",
  21.         38  : "up arrow",
  22.         39  : "right arrow",
  23.         40  : "down arrow",
  24.         45  : "insert",
  25.         46  : "delete",
  26.         91  : "left window",
  27.         92  : "right window",
  28.         93  : "select key",
  29.         96  : "numpad 0",
  30.         97  : "numpad 1",
  31.         98  : "numpad 2",
  32.         99  : "numpad 3",
  33.         100 : "numpad 4",
  34.         101 : "numpad 5",
  35.         102 : "numpad 6",
  36.         103 : "numpad 7",
  37.         104 : "numpad 8",
  38.         105 : "numpad 9",
  39.         106 : "multiply",
  40.         107 : "add",
  41.         109 : "subtract",
  42.         110 : "decimal point",
  43.         111 : "divide",
  44.         112 : "F1",
  45.         113 : "F2",
  46.         114 : "F3",
  47.         115 : "F4",
  48.         116 : "F5",
  49.         117 : "F6",
  50.         118 : "F7",
  51.         119 : "F8",
  52.         120 : "F9",
  53.         121 : "F10",
  54.         122 : "F11",
  55.         123 : "F12",
  56.         144 : "num lock",
  57.         145 : "scroll lock",
  58.         186 : ";",
  59.         187 : "=",
  60.         188 : ",",
  61.         189 : "-",
  62.         190 : ".",
  63.         191 : "/",
  64.         192 : "`",
  65.         219 : "[",
  66.         220 : "\\",
  67.         221 : "]",
  68.         222 : "'"
  69.     };
  70.     return keycodes;
  71. }
  72.  
  73. function detect_keycode(event) {
  74.     var L_CODEOUTPUT = 'Javascript Event (key code)';
  75.     var elementid = 'keycode_input';
  76.     var textid = 'keycode';
  77.     var input_box = document.getElementById(elementid);
  78.     var character = (document.all) ? event.keyCode: event.which;
  79.     input_box.value = String.fromCharCode(character);
  80.     keycodes = get_keyboard_codes();
  81.  
  82.     for (key in keycodes) {
  83.         if (character == key) {
  84.             input_box.value = keycodes[key];
  85.             break;
  86.         }
  87.     }
  88.  
  89.     document.getElementById(textid).innerHTML = L_CODEOUTPUT+': '+character;
  90.     return;
  91. }
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>IE Focus Hack</title>
  6. <title>Javascript Event Key Codes</title>
  7. <script type="text/javascript" src="/keycodes.js" charset="utf-8"></script>
  8. </head>
  9. <body>
  10. <p>
  11.     <input type="text" id="keycode_input" onkeypress="return false;" onkeydown="return detect_keycode(event);" />
  12.     <span id="keycode"></span>
  13. </p>
  14. </body>
  15. </html>