[JavaScript] テキストボックスのchangeイベント発生条件と使い方まとめ (input要素)

テキストボックスのchangeイベントの使い方の基礎

まずはchangeイベントの基本的な使い方から。

▼イベントを捕捉したい<input>要素に対してaddEventListener()メソッドを実行します。メソッドの第1引数にはイベント名を文字列で指定します。今回はchangeイベントなので'change'を入力します。第2引数にはイベントが発生したときに呼ばれる関数を指定します。

<input id="text">
<script>
let input = document.querySelector('#text');
let f = function(){ alert('changed')};
input.addEventListener('change', f);
</script>

▼jQueryを使った書き方です。jQueryオブジェクトのchange()メソッドの第1引数にイベントが発生したときに呼ばれる関数を指定します。jQueryのイベント関係の書き方は他にもいくつかあります。

<input id="text">
<script>
$('#text').change(function(){
	alert('changed');
});
</script>

テキストボックスのchangeイベントが発生するタイミング

HTMLページの<input>要素のchangeイベントが発生するタイミングは以下の2つのみです。ただし、WEBブラウザ間で違いがあり、一部で発生しないタイミングがあるので注意が必要です。例えば、Internet Explorer 11ではエンターキーを押したときのタイミングでは発生しません。WEBブラウザとタイミングの対応表は後述にまとめてありますので確認下さい。

<input>要素からフォーカスが外れたとき

<input>要素のフォーカスが外れたとき、変更前の値(*)と現在値が違う場合にchangeイベントが発生します。

エンターキーを押したとき

文字を入力または削除してからエンターキーを押したとき、変更前の値(*)と現在値が違う場合にchangeイベントが発生します。エンターキーを押すと、変更前の値は現在値に置き換えられるので、例えば2回連続でエンターキーを押したとしてもchangeイベントは最初の1回目のエンターキーでしか発生しません。

*変更前の値…<input>要素にフォーカスINしたときの値。もしくは、エンターキーを押したときの値(全角入力モードで未変換を確定させるときのエンターキーは含まないので注意)。

テキストボックスのchangeイベントが発生しないタイミング

上記の2つ以外の、以下のようなタイミングではchangeイベントは発生しません。この辺はC#などのJavaScript以外の言語も使っている方は動作の違いに混乱しやすいので要注意です。

• キーボードで文字を1文字入力したとき、1文字消したとき
• IMEが全角入力モードで未変換文字をエンターキー押下で確定させたとき
• Ctrl+Vコマンドや右クリックメニューのペーストを選択して文字を張り付けたとき
• Ctrl+Xコマンドや右クリックメニューの切り取りを選択して文字を切り取ったとき
• JavaScriptのvalueプロパティによって値を変更したとき
• jQueryのval()メソッドによって値を変更したとき

WEBブラウザ別のchangeイベント発生タイミングの対応表

主要WEBブラウザのchangeイベントが発生するタイミングをまとめました。IEだけエンターキーでの発生がないので気を付ける必要があります。なお、発生しないタイミングはここに表示しているWEBブラウザ全て共通となっています。

WEBブラウザは全てPC版です。モバイル版は未調査。

changeイベント発生タイミングの確認デモ

実際に、いつchangeイベントが発生するかを確認するためのデモを用意しました。テキストボックスのchangeイベントが発生したときに右にメッセージが表示されます。

JavaScriptのvalueプロパティで値をABに変更 jQueryのval()メソッドで値をCDに変更

確認用デモのソースコード

<input id="demo1_input"> <span id="demo1_log" style="color: #f66;"></span><br>
<button id="demo1_btn1">JavaScriptのvalueプロパティで値をABに変更</button> 
<button id="demo1_btn2">jQueryのval()メソッドで値をCDに変更</button>
<script>
$('#demo1_btn1').click(function(){
	document.querySelector('#demo1_input').value = 'AB';
});
$('#demo1_btn2').click(function(){
	$('#demo1_input').val('CD');
});
$('#demo1_input').change(function(){
	$('#demo1_log').text('changed').fadeIn().fadeOut(2000);
});
</script>