テキストボックスで KeyDown イベントを利用すると入力したキーを含むテキストボックスの値が取得できない (テキストボックスの値が意図したものと異なる )

テキストボックスで KeyDown イベントを利用すると入力したキーを含むテキストボックスの値が取得できない現象について紹介します。

現象の確認

プログラム

下記のHTMLファイルを作成します。

TextBoxKeyDown.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <script type="text/javascript">
    function keyDown() {
      var elem = document.getElementById('output');
      elem.innerText = document.forms.form1.Text_value.value;      
    }
  </script>
</head>
<body>
  <form id="form1">
    Value <input id="Text_value" type="text" onkeydown="keyDown();" /><br />
  </form>

  <hr />
  出力:<span id="output"></span>
</body>
</html>

解説

INPUTタグのテキストボックスに onkeydown イベントを用意しキーが入力されると、KeyDown()関数を呼び出す動作とします。KeyDown関数ではテキストボックスの内容を取得し、画面下部の[出力]欄に表示する動作とします。キーを押すごとに、テキストボックスに入力された値が下部の[出力]欄に反映されるような動作となります。

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。

テキストボックスに文字を入力します。"P" の文字を入力しましたが、出力エリアには何も表示されません。

テキストボックスにさらに文字を入力します。"e" の文字を入力しました。出力エリアには"P"の文字が表示されます。

さらに文字を入力します。"n" の文字を入力しました。出力エリアには"Pe"の文字が表示されます。

さらに文字を入力します。"g" の文字を入力しました。出力エリアには"Pen"の文字が表示されます。

テキストボックスに"Penguin"を入力しましたが、出力エリアには"Pengui"までしか表示されていません。文字を入力してから"出力"欄に表示されるまで一文字分、遅延しているような動作になります。

原因

onKeyDownイベントでは、入力したキーの内容がテキストボックスに反映される以前に呼び出されます。そのため、onKeyDownイベント内でテキストボックスの値を取得すると、キーを押す直前に表示されているテキストボックスの値が取得されます。

対策

onKeyUp イベントを利用します。

修正プログラム

下記のコードを記述します。

TextBoxKeyUp.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <script type="text/javascript">
    function keyUp() {
      var elem = document.getElementById('output');
      elem.innerText = document.forms.form1.Text_value.value;      
    }
  </script>
</head>
<body>
  <form id="form1">
    Value <input id="Text_value" type="text" onkeyup="keyUp();" /><br />
  </form>

  <hr />
  出力:<span id="output"></span>
</body>
</html>