JavaScript

フォームの入力テキストをリアルタイムに取得する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】


ウェブつくを支えてくれるスポンサー

  • この記事を書いた人
ウェブつく管理人

ウェブつく管理人

WEB制作の仕事をしています。より簡潔に、より分かりやすく解説していきたいと思い、サイトを運営しています。「読むのが苦にならないサイト」を目指しています。よろしくお願いします。

-JavaScript
-,

© 2020 ウェブつく Powered by AFFINGER5