Keymapper

index.html

<div>Click on a key to reassign it.</div>
<table>
</table>
<div id='keymapHolder'>
  Keymappings:
  <div id="keymap"></div>
</div>

Keymapper.markdown

Keymapper

Quick and easy way for users to reassign keys in a game or shortcuts in an application.

A Pen by Jordan O'Leary on CodePen.

License.

script.js

//The users keymap preference will be stored in reassign.
var reassign = {};
var keycodes = {
    8: "BCKSP",
    13: "ENTER",
    16: "SHIFT",
    17: "ALTRIGHT",
    18: "ALT",
    27: "ESC",
    32: "SPACE",
    37: "LEFT",
    38: "UP",
    39: "RIGHT",
    40: "DOWN",
    46: "DEL",
    91: "MAC",
    112: "F1",
    113: "F2",
    114: "F3",
    115: "F4",
    116: "F5",
    117: "F6",
    118: "F7",
    119: "F8",
    120: "F9",
    121: "F10",
    122: "F11",
    123: "F12",
    8: "backspace",
    9: "tab",
    13: "enter",
    16: "shift",
    17: "ctrl",
    18: "alt",
    19: "pause_break",
    20: "caps_lock",
    27: "escape",
    33: "page_up",
    34: "page down",
    35: "end",
    36: "home",
    37: "left_arrow",
    38: "up_arrow",
    39: "right_arrow",
    40: "down_arrow",
    45: "insert",
    46: "delete",
    48: "0",
    49: "1",
    50: "2",
    51: "3",
    52: "4",
    53: "5",
    54: "6",
    55: "7",
    56: "8",
    57: "9",
    65: "a",
    66: "b",
    67: "c",
    68: "d",
    69: "e",
    70: "f",
    71: "g",
    72: "h",
    73: "i",
    74: "j",
    75: "k",
    76: "l",
    77: "m",
    78: "n",
    79: "o",
    80: "p",
    81: "q",
    82: "r",
    83: "s",
    84: "t",
    85: "u",
    86: "v",
    87: "w",
    88: "x",
    89: "y",
    90: "z",
    91: "left_window key",
    92: "right_window key",
    93: "select_key",
    96: "numpad 0",
    97: "numpad 1",
    98: "numpad 2",
    99: "numpad 3",
    100: "numpad 4",
    101: "numpad 5",
    102: "numpad 6",
    103: "numpad 7",
    104: "numpad 8",
    105: "numpad 9",
    106: "multiply",
    107: "add",
    109: "subtract",
    110: "decimal point",
    111: "divide",
    112: "f1",
    113: "f2",
    114: "f3",
    115: "f4",
    116: "f5",
    117: "f6",
    118: "f7",
    119: "f8",
    120: "f9",
    121: "f10",
    122: "f11",
    123: "f12",
    144: "num_lock",
    145: "scroll_lock",
    186: "semi_colon",
    187: "equal_sign",
    188: "comma",
    189: "dash",
    190: "period",
    191: "forward_slash",
    192: "grave_accent",
    219: "open_bracket",
    220: "backslash",
    221: "closebracket",
    222: "single_quote"
  }
  //Set the names of the actions and their default keycodes here:
var actions = {
  'forward': 87,
  'backward': 83,
  'strafe left': 65,
  'strafe right': 68,
  'crouch': 16,
  'use': 69
};
$(document).ready(function() {
  //create inputs:
  for (var a in actions) {
    $('table').append('<tr><td>' + a + '</td><td><input name="' + a + '" value="' + keycodes[actions[a]] + '" type="text"/></td></tr>');
    //set initial reassign values:
    reassign[a] = actions[a];
    //show values:
    $('#keymap').html(JSON.stringify(reassign, null, '<br/>'));
  }

  //set input handler for reassigning keys:
  $('input').keyup(function() {
    //show which key was pressed
    this.value = keycodes[event.keyCode];
    //set the new value in the reassign object
    reassign[this.name] = event.keyCode;
    //update the #keymap div to show the contents of reassign
    $('#keymap').html(JSON.stringify(reassign, null, '<br/>'));
  });

});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

#keymapHolder{
  display:none;
}
table{
  margin:5px;
  border: 1px solid #000;
}
input{
  text-align:center;
}
td{
  text-transform:capitalize;
}
input{
  width:50px;
}