キーボードのイベントリスナー

テキストボックスで文字を入力すると文字がテキストボックスの下に表示されます。キーボードイベントリスナーが入力した文字を<div id="info"></div>にセットします。ソースです。

<!DOCTYPE html>
<html>
<head>
  <meta charset='UTF-8' />
  <title>sample</title>
  <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
  <script>
    var elm;
    window.onload = function() {
      elm = document.getElementById('info');
    }

    jQuery(function($) {
      $('#text')
        .keydown(function(e) {
            elm.innerHTML += e.key;
        })

      });
  </script>
</head>
<body>
    <input type="text" id="text"/>
    <div id="info"></div>
</body>
</html>

キーボードのメソッドを以下に示します。
keydown() キーが押された
keyup() キーが離れた
keypress() キーが押されている

キーデータは、
 click(function(e)
のように引数を指定すれば、e.keyで取得できます。