フォーム入力で発生するイベントについて
フォームにある入力項目に対して入力がされると、2種類のイベントが発生します。
| イベント名 | 発生するタイミング |
|---|---|
| input | 入力中に随時発生 |
| change | 入力が完了してフォーカスが外れたときに発生 |
イベント「input」は入力中に何度も発生します。
例えば、テキストフォームに「test」と入力した場合、「t」「e」「s」「t」と1文字入力する度にイベントが発生するようになっています。
もう1つのイベント「change」は入力が完了して入力項目からフォーカスが外れたタイミングで発生します。
テキストフォームに「test」と入力した場合は、全て打ち終わって他の入力項目に移動したりしたときに1度だけイベントが発生します。
チェックボックスやラジオボタン、プルダウンメニューのときは、選択項目を選択したタイミングに発生するようになっています。
これらのイベントが発生する様子を、具体的にコードを使って解説していきます。
ここでは以下のHTMLコードに対して、イベントリスナーを設定します。
HTMLコード例
<form method="post" action="">
<label for="input_name">名前：</label>
<input type="text" id="input_name" name="input_name" value="">
</form>以下のコードは、このフォームのテキスト入力欄であるinput要素に対して、イベントリスナーで「input」と「change」を登録し、入力された値を出力します。
JavaScript コード例
window.addEventListener('DOMContentLoaded', function(){
// input要素を取得
let input_name = document.getElementById("input_name");
// イベントリスナーでイベント「change」を登録
input_name.addEventListener("change",function(){
console.log("Change action");
console.log(this.value);
});
// イベントリスナーでイベント「input」を登録
input_name.addEventListener("input",function(){
console.log("Input action");
console.log(this.value);
});
});1行目のイベントリスナーは、ページが読み込まれた際に発生するイベント「DOMContentLoaded」を登録しています。
このイベントをトリガーとするとことで、ページが読み込まれたタイミングでinput要素にイベントリスナーを登録することができます。
この状態で「テスト」と入力すると、コンソールに次のように出力されます。
コンソールの出力例
// Input action
// t
// Input action
// て
// Input action
// てs
// Input action
// てす
// Input action
// てすt
// Input action
// てすと
// Input action
// テスト
// Input action
// テスト
// Change action
// テスト入力中はイベント「input」のみ発生し、入力が完了してフォーカスが外れたときのイベント「change」が発生する様子が分かります。
なお、複数行のテキストを入力できるtextarea要素に対しても、この2つのイベントを使うと同じように入力中の値と入力完了後の値をそれぞれ取得することができます。
以下のコードはテキストエリアにイベントを設定して入力した値を取得するための全コードです。
JavaScript コード例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GRAYCODE JavaScript</title>
<script>
window.addEventListener('DOMContentLoaded', function(){
// テキストエリアのHTML要素を取得
let textarea_contact = document.getElementById("text_contact");
// イベント「change」を登録
textarea_contact.addEventListener("change",function(){
console.log("Change action");
console.log(this.value);
});
// イベント「input」を登録
textarea_contact.addEventListener("input",function(){
console.log("Input action");
console.log(this.value);
});
});
</script>
</head>
<body>
<article id="content1">
<h1>JavaScriptレシピ</h1>
<form method="post" action="">
<label for="text_contact">お問い合わせ内容：</label>
<textarea id="text_contact" name="text_contact"></textarea>
</form>
</article>
</body>
</html>プルダウンメニューで項目を選択したタイミングで処理を実行
プルダウンメニューはテキスト入力のように入力中の状態はないため、いずれかの項目を選択したタイミングでイベント「input」とイベント「change」がほぼ同時に発生します。
「ほぼ同時」ではありますが、厳密には必ずinput、changeの順に発生します。
以下のコードは、プルダウンメニューのselect要素に2つのイベントを設定します。
JavaScript コード例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GRAYCODE JavaScript</title>
<script>
window.addEventListener('DOMContentLoaded', function(){
// プルダウンメニューのselect要素を取得
let select_state = document.getElementById("select_state");
// イベント「change」を登録
select_state.addEventListener("change",function(){
console.log("Change action");
console.log(this.value);
});
// イベント「input」を登録
select_state.addEventListener("input",function(){
console.log("Input action");
console.log(this.value);
});
});
</script>
</head>
<body>
<article id="content1">
<h1>JavaScriptレシピ</h1>
<form method="post" action="">
<select id="select_state" name="select_state">
<optgroup label="関東">
<option value="1">東京</option>
<option value="2">埼玉</option>
<option value="3">群馬</option>
<option value="4">栃木</option>
<option value="5">茨城</option>
<option value="6">千葉</option>
<option value="7">神奈川</option>
</optgroup>
<optgroup label="関西">
<option value="8">大阪</option>
<option value="9">京都</option>
<option value="10">兵庫</option>
<option value="11">滋賀</option>
<option value="12">奈良</option>
<option value="13">和歌山</option>
</optgroup>
</select>
</form>
</article>
</body>
</html>プルダウンメニューからいずれかを選択すると、2つのイベントが発生して選択項目が出力されます。
もし複数選択ができるmultiple属性のある場合についても、同じように項目を1つ選択するたびに2つのイベントが発生します。
チェックボックスで項目が選択されたタイミングで処理を実行
チェックボックスはプルダウンメニューと同じように入力中の動作がないため、項目が選択・解除されるたびにイベント「input」とイベント「change」が発生します。
イベントが発生する順番も同じです。
以下のコードは「興味・関心のある分野」という複数選択できるチェックボックスのフォームにおいて、各項目が選択・解除されたときに発生したイベントを出力します。
また、選択状態になったときのみ項目の値を出力しています。
JavaScript コード例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GRAYCODE JavaScript</title>
<script>
window.addEventListener('DOMContentLoaded', function(){
// チェックボックスを全て取得
let input_interestings = document.querySelectorAll("input[name=interesting]");
if( 0 < input_interestings.length ) {
for(let checkbox of input_interestings) {
checkbox.addEventListener("change",function(){
console.log("Change action");
if( this.checked ) {
console.log(this.value);
}
});
checkbox.addEventListener("input",function(){
console.log("Input action");
if( this.checked ) {
console.log(this.value);
}
});
}
}
});
</script>
</head>
<body>
<article id="content1">
<h1>JavaScriptレシピ</h1>
<form method="post" action="">
<div>
<h2>興味・関心のある分野（複数選択可）</h2>
<label><input type="checkbox" name="interesting" value="1">文学</label>
<label><input type="checkbox" name="interesting" value="2">数学</label>
<label><input type="checkbox" name="interesting" value="3">物理</label>
<label><input type="checkbox" name="interesting" value="4">天文学</label>
<label><input type="checkbox" name="interesting" value="5">歴史</label>
<label><input type="checkbox" name="interesting" value="6">コンピューター・プログラミング</label>
<label><input type="checkbox" name="interesting" value="7">英語</label>
</div>
</form>
</article>
</body>
</html>チェックボックスは同じname属性の項目が複数あるため、querySelectorAllメソッドで「name="interesting"」のHTML要素を全て取得しています。
そして、続くfor...of文の中で各項目に1つずつイベントリスナーを使って2つのイベントを登録していきます。
選択、または解除されたチェックボックスはまず発生したイベントの種類を出力しますが、その後にcheckedプロパティをチェックして選択状態になっているときのみvalue属性を参照して値を出力します。
ラジオボタンの項目についてもチェックボックスと同様に、選択したタイミングで2つのイベントが発生します。