変更のたびにjQueryをトリガーする数値入力があります。これを行うには、$('#id').bind('keyup change', ...);キーアップまたはマウスコントローラーの変更時にトリガーされるを実行します。
これは、マウスクリック（トリガーchange）および数字の入力（トリガー）を検出するために機能しますkeyup。changeただし、カーソルキーの場合は、との両方がトリガーされますkeyup。すべての状況で1回だけトリガーされるようにするにはどうすればよいですか？
問題を示す例を次に示します：http：//jsfiddle.net/jSjkE/
onchangeあなたはイベントについて間違った概念を持っています。
要素の値が変化したときは発火しません。代わりに、次の 2 つの条件が満たされた場合にのみ発火します。
注: 上記は type の入力用ですtext。型の場合はプロパティが変更されるとすぐに起動し、checkbox要素radioの場合は選択されたオプションが変更されるとすぐに起動します。checkedselect
Chromeの上/下矢印onchangeを押すと、(おそらく誤って) イベントが発生します。他の多くの主要なブラウザーはまだ数値入力の実装を持っておらず、この動作に従わない可能性があるため、これに依存input type="number"するべきではありません。
oninput代わりに、HTML5 を使用しているため、要素の値が更新されるたびに発生する HTML5 イベントに依存する必要があります。
$(function() {
var count = 0;
$('#num').on('input', function(e) {
console.log('update ' + (++count) + ' Value: ' + this.value);
});
});
編集：
古い (および非 HTML5) ブラウザーの場合、keyupイベントをフォールバックとして使用できます。
$('#num').on('input keyup', function(e) {
HTML5 以外のブラウザーでこれを行う最も回復力のある方法はsetInterval、要素の値が変更されたかどうかを常にチェックするkeyupことです。テキストを選択してテキスト ボックスにドラッグしてもトリガーされません.on('input keyup mouseup'。ユーザーがブラウザの [編集] > [貼り付け] メニューを使用した場合にトリガーされます。
編集2:
を使用したくない場合はsetInterval、巨大なイベント マップを.on/内に配置し、現在の値を要素.bindの に保存して、値が変更されたかどうかを確認できます。.data()
var count = 0;
$('#num').on('input keyup change', function(e) {
if (this.value == $(this).data('curr_val'))
return false;
$(this).data('curr_val', this.value);
console.log('update ' + (++count) + ' Value: ' + this.value);
});
onchangeイベントをイベント マップに追加したので、イベントが失敗しoninputてもonkeyup(ブラウザのメニューを使用してデータを貼り付ける非 html5 ブラウザ)、onchange要素がフォーカスを失ったときにイベントが発生します。
以下は、コメント付きの最終編集であり、setIntervalグローバル.data()の使用を避けるため、使用するフォールバックを選択できます。
$(function() {
var $num = $('#num');
$num.data('curr_val', $num.val()); //sets initial value
var count = 0;
setInterval(function(){
if ($num.data('curr_val') == $num.val()) //if it still has same value
return false; //returns false
$num.data('curr_val', $num.val()); //if val is !=, updates it and
//do your stuff
console.log('update ' + (++count) + ' Value: ' + $num.val());
}, 100); //100 = interval in miliseconds
});
$('input').unbind('keyup').bind('keyup',function(e){ ...