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の更新など、ユーザーの体験を向上させる目的で利用する。