JavaScriptのoninputイベントハンドラについて

JavaScriptのoninputイベントハンドラについて

JavaScriptのoninputイベントハンドラについて

このページでは、JavaScriptにおけるoninputイベントハンドラについて詳しく解説します。

oninputとは?

oninputは、HTML要素で入力内容が変更された際に発火するイベントハンドラです。このイベントは、テキストフィールドやテキストエリア、その他のフォーム要素に適用され、ユーザーが入力を行うたびに実行されます。

onchangeとの違い

onchangeは、入力内容が変更され、かつフォーカスを外したときに発火するのに対し、oninputは入力内容が変更されるたびに即座に発火します。このため、リアルタイムな入力監視にはoninputが適しています。

基本的な使い方

以下は、oninputを使ったシンプルな例です。

<input type="text" oninput="console.log(this.value)" placeholder="入力してください">

この例では、ユーザーがテキストを入力するたびに、その値がコンソールに表示されます。

oninputの実用例

リアルタイムな文字数カウント

ユーザーが入力した文字数をリアルタイムで表示する例です。

<input type="text" oninput="updateCharacterCount()" placeholder="テキストを入力">
<span id="charCount">0</span> 文字<script>
function updateCharacterCount() {
    const input = document.querySelector('input[type="text"]');
    document.getElementById('charCount').textContent = input.value.length;
}
</script>

リアルタイムなフォームバリデーション

入力が5文字以上でないとエラーを表示する例です。

<input type="text" oninput="validateInput()" placeholder="5文字以上入力してください">
<span id="error"></span>
<script>
function validateInput() {
    const input = document.querySelector('input[type="text"]');
    const errorSpan = document.getElementById('error');
    if (input.value.length < 5) {
        errorSpan.textContent = "5文字以上入力してください";
    } else {
        errorSpan.textContent = "";
    }
}
</script>

動的なスタイル変更

入力内容に応じて背景色を変える例です。

<input type="text" oninput="changeBackgroundColor()" placeholder="色を指定してください (例: red, blue)">
<script>
function changeBackgroundColor() {
    const input = document.querySelector('input[type="text"]');
    document.body.style.backgroundColor = input.value;
}
</script>

イベントオブジェクトの活用

oninputイベントでは、イベントオブジェクトを活用することで、より柔軟な操作が可能です。

例として、イベントオブジェクトを用いて現在の入力値を取得する方法を示します。

<input type="text" oninput="handleInput(event)" placeholder="入力してください">
<script>
function handleInput(event) {
    console.log("現在の値:", event.target.value);
}
</script>

ベストプラクティス

以下は、oninputを使用する際のベストプラクティスです。

  • リアルタイムな更新が必要な場合に使用する。
  • 直接HTML属性にスクリプトを書く代わりに、JavaScript内でaddEventListenerを使うことを検討する。
  • フォームバリデーションやUIの更新など、ユーザーの体験を向上させる目的で利用する。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です