JavaScript フォームイベント
JavaScriptマニュアルユーザーがフォーム内の項目を操作した際の動作を捉えることはフォームイベントと呼ばれます。ユーザーの入力を制御したり、フォームのバリデーションを行ったりするために使われます。
フォームイベントの種類
以下に、JavaScriptで扱える主なフォームイベントを挙げます。
- submit：フォームが送信される際に発生します。
- change：フォーム内の項目の内容が変更されたときに発生します。
- input：ユーザーが入力項目を操作した（文字を入力した、チェックボックスをオン/オフにしたなど）際に発生します。
- focus：項目がフォーカスされたとき（例えば、テキストボックスにカーソルが当たったときなど）に発生します。
- blur：項目からフォーカスが外れたときに発生します。
これらのイベントは、addEventListenerメソッドを使ってHTML要素に関連付けることができます。
サンプルコード
submit
<!-- ユーザーが入力した情報を送信するフォーム -->
<form id="myForm">
<input type="text" name="name" required>
<input type="submit" value="送信">
</form>
<!-- メッセージを表示する領域 -->
<p id="message"></p>
<script>
let form = document.getElementById('myForm');
let message = document.getElementById('message');
// フォームが送信されたときの動作を定義
form.onsubmit = function(e) {
// フォームのデフォルトの送信動作をキャンセル
e.preventDefault();
// メッセージを表示
message.textContent = 'フォームが送信されました！';
};
</script>ユーザーがフォームを送信したときに、その送信を防ぎ、代わりにメッセージを表示します。
これにより、例えば、データの検証や送信前の確認など、送信をカスタマイズすることが可能になります。
change
<!-- ユーザーが選択肢から一つを選ぶセレクトボックス -->
<select id="mySelect">
<option value="">選択してください</option>
<option value="option1">オプション1</option>
<option value="option2">オプション2</option>
</select>
<!-- メッセージを表示する領域 -->
<p id="message"></p>
<script>
let select = document.getElementById('mySelect');
let message = document.getElementById('message');
// セレクトボックスの選択が変更されたときの動作を定義
select.onchange = function() {
// 選択が変更されたことをメッセージで表示
message.textContent = '選択が変更されました： ' + select.value;
};
</script>ユーザーがセレクトボックスの選択肢を変更したときに、新たに選ばれた選択肢をメッセージとして表示します。ユーザーの選択に応じて動的な反応を行うことができます。
input
<!-- ユーザーがテキストを入力するテキストボックス -->
<input type="text" id="myInput" placeholder="ここに入力してください">
<!-- メッセージを表示する領域 -->
<p id="message"></p>
<script>
let input = document.getElementById('myInput');
let message = document.getElementById('message');
// テキストボックスの入力が変更されたときの動作を定義
input.oninput = function() {
// 入力が変更されたことをメッセージで表示
message.textContent = '入力が変更されました： ' + input.value;
};
</script>
このコードは、ユーザーがテキストボックスに入力を行うたびに、その入力をメッセージとして表示します。これでリアルタイムにユーザーの入力を処理することができます。
focusとblur
<!-- ユーザーがテキストを入力するテキストボックス -->
<input type="text" id="myInput" placeholder="ここに入力してください">
<!-- メッセージを表示する領域 -->
<p id="message"></p>
<script>
let input = document.getElementById('myInput');
let message = document.getElementById('message');
input.onfocus = function() {
message.textContent = 'テキストボックスが選択されました';
};
input.onblur = function() {
message.textContent = 'テキストボックスから選択が外れました';
};
</script>ユーザーがテキストボックスにフォーカスを当てると（つまり、クリックするかタブキーを使って選択すると）、メッセージが表示され、テキストボックスが選択されたことを示します。
逆に、ユーザーがテキストボックスからフォーカスを外すと（つまり、他の領域をクリックするか、タブキーを使って次の要素に移動すると）、メッセージが更新され、テキストボックスから選択が外れたことを示します。
コメント