入力ボックス値の変化を動的にリスニングする
1230 ワード
入力ボックス値の変化を動的に傍受する必要がある場合があります.onkeydown、onkeypress、onkeyupを傍受イベントとして使用すると、コピーや貼り付けなどの操作が使えないことがあります.プロフェッショナルソリューション:HTML 5標準イベントoninput、onchange、IE固有イベントproperchange.
1 oninputとpropertychangeイベント
Inputは標準的なブラウザイベントであり、一般的にinput要素に適用され、入力ボックスの値が変更されるとイベントがトリガーされ、キーボード入力でもマウス貼り付けの変更でも変化がタイムリーに監視され、oninputは値が変更されるとすぐにトリガーされることに重点を置いている.propertychange:oninputのIE 9以下の互換性の代わりにoninputと機能します.
2 onchangeイベント
onchangeは、値が変更された後にフォーカスを失ってトリガーされ、selectなどの非入力ボックスで使用できます.
3ベスト・プラクティス
Inputとpropertychangeを併用
1 oninputとpropertychangeイベント
Inputは標準的なブラウザイベントであり、一般的にinput要素に適用され、入力ボックスの値が変更されるとイベントがトリガーされ、キーボード入力でもマウス貼り付けの変更でも変化がタイムリーに監視され、oninputは値が変更されるとすぐにトリガーされることに重点を置いている.propertychange:oninputのIE 9以下の互換性の代わりにoninputと機能します.
2 onchangeイベント
onchangeは、値が変更された後にフォーカスを失ってトリガーされ、selectなどの非入力ボックスで使用できます.
3ベスト・プラクティス
Inputとpropertychangeを併用
$(".order_discount_item input[type='number']").on("input propertychange", function () {
var modify = false;
var value = $(this).val().toString();
var inputName = $(this).attr("name");
//
if ((value.length > 0 && /^[1-9]\d{0,6}$/.test(value) == false)) {
value = value.substr(0, value.length - 1);
$(this).val(value);
return;
} else if (value.length > 0 && /^[0-9]{0,6}\.?[0-9]{0,2}$/.test(value) == false) {
value = value.substr(0, value.length - 1);
$(this).val(value);
return;
}