フォームの入力テキストをリアルタイムに取得するonkeyup【JavaScript】

この記事では、フォーム（input text）に入力された値を即座にリアルタイムで取得する方法を紹介します。

onkeyupというイベントを使います。

inputが空か入力済かを判定するコードサンプル

デモ

inputエリアにテキストを入力すると、リアルタイムで「入力中」と表示され、入力しているテキストが表示されます。

実際のコード

上記のデモの実際のコードはこちらです。

function inputCheck() {
  var inputValue = document.getElementById( "inputForm" ).value;
  document.getElementById( "check" ).innerHTML = '入力中：　' + inputValue;
}

<label>
  <input type="text" id="inputForm" onkeyup="inputCheck()">
</label>
<div id="check">入力前</div>

#check {
  background-color: #eee;
}

onkeyupとは

onkeyupイベントは、ユーザーが押していたキーを離した時に発生します。

問い合わせフォームなどでとても便利に使えます。

他に似たような動作をするものにonkeydown、onkeypressがあります。以下の記事で詳しく解説しています。

≫onkeydown、onkeypress、onkeyupの動作の違い【JavaScript】