Give it focus and it'll capture keyboard shortcuts kind of like the widgets you see in OS X apps. Useful for letting users set hotkeys. I should probably turn this into a jQuery plugin one day. Let me know if you have any suggestions or code critiques!

index.html

<h4>Click on the box and enter a new keyboard shortcut:</h4>
<input id="shortcut-box"><button id="clear-shortcut-box">clear</button>

script.js

currentVal = {};

KeyBox = {
  init: function(opts) {
    var elem = opts.elem;
    // clear the text field when the user clicks on it
    elem.focus(function(event) {
      $(event.target).val('');
    });
    
    // set to whatever the last value was on blur
    elem.blur(function(event) {
      var target = $(event.target);
      if(currentVal === {}) {
        target.val('');
      } else {
        target.val(currentVal.str);
      }
    });
    
    elem.keyup(function(event) {
      event.preventDefault();
      var target = $(event.target);
      target.blur();
      
      // generate string to place in box
      var str = '';
      // TODO: cross-OS shenanigans, iirc meta isn't
      // always the same as the command key
      if(event.metaKey) {
        str += 'Cmd + ';
      }
      if(event.ctrlKey) {
        str += 'Ctrl + ';
      }
      if(event.altKey) {
        str += 'Alt + ';
      }
      if(event.shiftKey) {
        str += 'Shift + ';
      }
      
      str += String.fromCharCode(event.keyCode);
      target.val(str);
      currentVal = {
        str: str,
        event: event
      };
    });
    
    // TODO: add the clear button automagically?
    $('#clear-shortcut-box').click(function(event) {
      elem.val('');
      currentVal = {};
    });
  }
}

$(function() {
  KeyBox.init({
    elem: $('#shortcut-box'),
    handler: function(event) { console.log(event) }
  });
});

style.css

body {
  font-family: sans-serif;
}

#shortcut-box {
  border-radius: 3px;
  border: solid #333 1px;
  padding: 5px;
  width: 200px;
}