キーボードイベント

キーボードイベント

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

<!DOCTYPE html>
<html>
<head>
  <meta charset='UTF-8' />
  <title>sample</title>
  <script>
    function load() {
      document.getElementById('text').addEventListener('keydown', function(e){
        var elm = document.getElementById('dv');
        elm.innerHTML += e.key;

      }, false);
    }
    document.addEventListener("DOMContentLoaded", load, false);
  </script>
</head>
<body>
  <div id="dv" style ="width: 640px; height: 240px; background-color: #ccf;">
  </div>
<input type="text" id="text"/>
</body>
</html>

キーボードイベントには, keydownとkeyupがあります。以前はkeypressも使われていたようですが、現在非推奨になっています。イベントリスナー部分は、


function(e){
        var elm = document.getElementById('dv');
        elm.innerHTML += e.key;

      }

functionの引数eがキーボードイベントデータになります。e.keyにキーデータが入ります。 Enterキーを押すとEnterと表示されます。また、漢字はPeocessとなってしまい期待通りの結果になりません。