【JavaScript】input – フォーム要素の値が変更された際に発生するイベント

JavaScriptのinputイベントは、フォーム要素の値が変更された際に発生するイベントです。主に<input>や<textarea>といったフォーム要素に関連して使用されます。ユーザーが入力を行うたびにイベントが発火するため、リアルタイムでの入力内容の監視や検証に役立ちます。今回は、inputイベントの基本的な使い方から応用例までをまとめていきたいと思います。

目次非表示

inputイベントの基本的な使い方
イベントオブジェクトを利用した応用
他のイベントとの組み合わせ
複数のinput要素を管理する
さいごに

inputイベントの基本的な使い方

inputイベントは、フォーム要素の値が変更されたときに発生します。このイベントを利用するには、イベントリスナーを登録する必要があります。

以下は、inputイベントの基本的な例です。

See the Pen input() by tones (@tonescodedesign) on CodePen.

JavaScript

const inputField = document.getElementById('textInput');
const output = document.getElementById('output');

// inputイベントリスナーを登録
inputField.addEventListener('input', (event) => {
  output.textContent = `入力された値: ${event.target.value}`;
});

HTML

<label for="textInput">名前を入力してください：</label>
<input type="text" id="textInput">
<p id="output"></p>

このコードでは、ユーザーが<input>に値を入力するたびに、その値がリアルタイムで下部の<p>要素に表示されます。

イベントオブジェクトを利用した応用

inputイベントでは、イベントオブジェクトを使用してフォーム要素の詳細情報を取得できます。

以下は、入力内容をリアルタイムでバリデーションする例です。

See the Pen input() by tones (@tonescodedesign) on CodePen.

JavaScript

const emailInput = document.getElementById('emailInput');
const validationMessage = document.getElementById('validationMessage');

emailInput.addEventListener('input', (event) => {
  const value = event.target.value;
  if (value.includes('@') && value.includes('.')) {
    validationMessage.textContent = '有効なメールアドレスです';
    validationMessage.style.color = 'green';
  } else {
    validationMessage.textContent = '無効なメールアドレスです';
    validationMessage.style.color = 'red';
  }
});

HTML

<label for="emailInput">メールアドレスを入力してください：</label>
<input type="email" id="emailInput">
<p id="validationMessage"></p>

このコードでは、inputイベントを使用してメールアドレスの簡易バリデーションをリアルタイムで行い、メッセージを表示します。

他のイベントとの組み合わせ

inputイベントは、blurやchangeイベントと組み合わせて使用することで、より柔軟なフォーム操作が可能になります。

以下は、inputとblurを組み合わせた例です。

See the Pen input() by tones (@tonescodedesign) on CodePen.

JavaScript

const usernameInput = document.getElementById('username');
const statusMessage = document.getElementById('statusMessage');

usernameInput.addEventListener('input', () => {
  statusMessage.textContent = '入力中...';
  statusMessage.style.color = 'blue';
});

usernameInput.addEventListener('blur', () => {
  if (usernameInput.value.trim() === '') {
    statusMessage.textContent = 'ユーザー名を入力してください';
    statusMessage.style.color = 'red';
  } else {
    statusMessage.textContent = '入力が完了しました';
    statusMessage.style.color = 'green';
  }
});

HTML

<label for="username">ユーザー名を入力してください：</label>
<input type="text" id="username">
<p id="statusMessage"></p>

この例では、入力中と入力完了後の状態を区別してメッセージを表示しています。

2025年2月4日【JavaScript】focus / blur – フォーカス操作に関連するイベント

複数のinput要素を管理する

複数のフォーム要素を一括して管理する場合も、inputイベントが便利です。

See the Pen input() by tones (@tonescodedesign) on CodePen.

JavaScript

const form = document.getElementById('userForm');
const summary = document.getElementById('summary');

form.addEventListener('input', () => {
  const firstName = form.firstName.value;
  const lastName = form.lastName.value;
  summary.textContent = `フルネーム: ${firstName} ${lastName}`;
});

HTML

<form id="userForm">
  <label for="firstName">名：</label>
  <input type="text" id="firstName" name="firstName"><br>
  <label for="lastName">姓：</label>
  <input type="text" id="lastName" name="lastName"><br>
  <p id="summary"></p>
</form>

このコードでは、フォーム全体に対してinputイベントリスナーを設定し、入力内容を集約して表示しています。