jqueryには、正規表現パターンと一致しないテキストボックスへの入力を防ぐプラグインがありますか? たとえば、支払い金額を入力するためのテキストボックスがあり、ユーザーが数字と . テキストボックスでは、他のすべての入力はテキストボックスに影響しません..
ありがとう
jqueryには、正規表現パターンと一致しないテキストボックスへの入力を防ぐプラグインがありますか? たとえば、支払い金額を入力するためのテキストボックスがあり、ユーザーが数字と . テキストボックスでは、他のすべての入力はテキストボックスに影響しません..
ありがとう
jQuery(function($){
$("#paymentAmount").mask("9999.99");
});
jquery-keyfilter プラグイン- 必要なことを行います。
すぐに利用できるようなプラグインはないと思います。正規表現を適用する前に、ユーザーが何らかの入力を入力できるようにする必要があるため、問題は少しトリッキーです。つまり、正規表現が単純に一連の文字を定義しない限り、入力された各文字に対して単純に照合することはできません。
たとえば、支払い金額を入力するときに数字と小数を 1 文字単位で入力できるようにしたい場合、入力できない理由は何99.99.23.42492
ですか?
一方、 のような完全な正規表現を/\d+\.\d{2}/
指定すると、単一の文字ではまったく一致しません。正規表現を適用して入力を消去する前に、いくつかの文字を入力できるようにする必要があります。一致しない場合。それはイライラするかもしれません。
入力時に入力を本当にフィルタリングしたい場合は、最初の文字に数字を許可し、次に数字を許可するか、小数点が入力されるまで後続の文字に小数点を許可し、さらに 2 桁を許可し、それ以上入力しないようにします。汎用フィルターではありません。
たとえば、これを行うコードをいくつか示しますが、非常に見栄えが悪いです。
myInput.keydown(function() {
var text = this.val
if(!/^\d/.test(text)) {
return '';
} else {
done = text.match(/^(\d+\.\d\d)/);
if (done) { return done[0]; }
last_char = text.substr(text.length-1,1);
decimal_count = text.replace(/[^\.]/g,'').length;
if (decimal_count < 1) {
if (!/[\d\.]/.test(last_char)) {
return text.substr(0,text.length-1);
}
} else if (decimal_count == 1 && last_char == '.') {
return text;
} else {
if (!/[\d]/.test(last_char)) {
return text.substr(0,text.length-1);
}
}
return text;
}
});
もちろん、「実際の」入力を行わずに特定の値を貼り付けた場合、これは機能しません。
たぶん、他のアプローチがあなたにとってよりうまくいくでしょうか?入力自体をフィルタリングするのではなく、フィールドを強調表示して、ユーザーが非数字、非小数、または複数の小数を入力したかどうかをユーザーに示すのと同じです。
jQuery ドキュメントで提案されているように、キーボード イベントは少し扱いにくいものです。
http://unixpapa.com/js/key.html
http://yehudakatz.com/2007/07/03/event-normalization-in-jquery-113/
あなたに関係する困難はこれです:
キーの識別
キーボード イベントをキャッチすると、どのキーが押されたかを知りたい場合があります。もしそうなら、あなたは求めすぎているかもしれません。これは、ブラウザーの非互換性とバグの非常に大きな混乱です。
上記の最初のリンクから
それでも、jQuery では次のようにします。
textBoxElement.keydown( function( e ) {
var chr = String.fromCharCode( e.which );
if( !/[0-9.]/.test( chr ) ) {
e.preventDefault();
}
}
これにより、Enter、Tab、Delete などの他の重要なキーも無効になるため、条件に追加する必要があります。他のすべてのキーが印刷可能で正規表現できないため、e.keyCode を確認する必要があります。13、8など
正規表現についてあまり気にしない場合は、次のようなことができます
textBoxElement.keydown( function( e ) {
switch( e.keyCode ) {
case 48: //0
case 49: //1
case 50: //2
case 51: //3
case 52: //4
case 53: //5
case 54: //6
case 55: //7
case 56: //8
case 57: //9
case 48: //10
case 37: //left
case 39: //right
case 8: //tab
case 13: //return
case 46: //del
case 190: //.
return;
}
e.preventDefault();
});
これが私が使用する簡単なjquery拡張です:
jQuery.fn.DecimalMask = function () {
return this.each(function () {
$(this).keypress(function (e) {
var keynum;
if (window.event) // IE
{
keynum = e.keyCode;
}
else if (e.which) // Netscape/Firefox/Opera
{
keynum = e.which;
}
if (typeof keynum == 'undefined') return true;
else if (keynum == 46 && $(this).val().indexOf(".") > -1) return false; //already has a decimal point
else return ((keynum > 47 && keynum < 58) || keynum == 13 || keynum == 8 || keynum == 9 || keynum == 46 || keynum == 45); //allow ony number keys or keypad number keys
});
});
};
//implementation
$("#mytxtbox").DecimalMask();