jQueryでテキストボックスの変更を監視/検知する
はじめに
テキストボックスの変更を検知したくてイベントの挙動を調べたりしたのでメモ。
change, keypress, keyupの挙動まとめ
キー操作したときにどんなイベントが発生するのかは日本語入力時に発生するキーイベントのテストを使って確認させていただきました。
ポイント
- changeはフォーカスが外れたときに発生する
- keypressは全角やdelete,backspaceを入力しても発生しない
- keyupはカーソル移動や全角・半角の切り替えなどすべてのキー操作を拾ってしまう
change
changeイベントを使うと変更を検知できます。
$('#テキストボックスのid').change(function() {
isChange = true;
});
changeイベントが発生するのはテキストボックスからフォーカスが外れた後です。
テキストボックスにフォーカスがあたったままブラウザ(タブ)の閉じるボタンを押された場合、変更を検知できません。
keypress
keypressイベントはその名の通りキーが押されたときに発生します。
$('#テキストボックスのid').keypress(function() {
isChange = true;
});
keypressイベントが発生するのは印刷可能文字が押された時だけです。具体的には英数とEnterです。
印刷不可能文字(delete,backspace)や日本語(IMEがオンになった状態)ではkeypressイベントが発生しません。
日本語入力や、文字の削除は検知できません。
keyup
keyupイベントはキーを全てのキー操作で発生します。
$('#テキストボックスのid').keyup(function() {
isChange = true;
});
カーソル移動や半角/全角キーの操作等、テキストボックスの中身が変わっていなくても発生してしまいます。
テキストボックスの変更を検知する方法
change, keypress, keyupイベントの挙動を踏まえると、次の3つのやり方が考えられます。
changeイベントを使う
フォーカスがあたっている間は変更を検知できなくていい場合はchangeで充分です。
変更前と比較する
画面表示時に変更前の値を保持しておいて、keyupが発生するたびに比較します。
$('#テキストボックスのID').keyup(checkChange(this));
function checkChange(e){
var old = v=$(e).find('#テキストボックスのID').val();
return function(){
v=$(e).find('#テキストボックスのID').val();
if(old != v){
old = v;
isChange = true;
delSuccessMSG();
}
}
}
フォーカスが当たったままでも変更が検知できます。
keypressとkeyupを組み合わせる
半角英数しか入力させないなら、keypressとkeyupを組み合わせて使うこともできます。
keypressで半角英数の入力を検知し、keyupでdeleteキーとbackspaceキーの入力を検知を検知します。
// 半角英数の入力を検知
$('#テキストボックスのid').keypress(function() {
isChange = true;
delSuccessMSG();
});
// deleteキーとbackspaceキーの入力を検知
$('#テキストボックスのid').keyup(function(e) {
if (e.keyCode == 46 || e.keyCode == 8){
isChange = true;
delSuccessMSG();
}
});
フォーカスが当たったままでも変更が検知できます。
ちなみに
セレクトボックスやチェックボックスはchangeイベントを使って簡単に検知できます。
$('#セレクトボックスのid').change(function() {
isChange = true;
});
Author And Source
この問題について(jQueryでテキストボックスの変更を監視/検知する), 我々は、より多くの情報をここで見つけました https://qiita.com/maruyam-a/items/cf0168f91d934b449a07著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .