Jquery plugin to prevent input of any input not matching regular expression

Question

Jquery has some kind of plugin that prevents any input from entering into a text box that doesn't match the regexp pattern. for example, I have a text box for entering the payment amount, I want the user to be able to enter only numbers and. in the text box, all other input will not affect the text box.

thanks

Answer 1

jquery-keyfilter plugin - does what is needed.

Answer 2

Masked input plugin

jQuery(function($){ $("#paymentAmount").mask("9999.99"); }); 

Answer 3

Keyboard events are a bit complicated, as suggested in jQuery docs.
http://unixpapa.com/js/key.html
http://yehudakatz.com/2007/07/03/event-normalization-in-jquery-113/

The difficulty that bothers you is this:

Key identification
When you catch a keyboard event, you can find out which key was pressed. If so, you may ask too much. This is a very big mess of browser incompatibility and errors.
From the first link above

Anyway, in jQuery I would do the following:

 textBoxElement.keydown( function( e ) { var chr = String.fromCharCode( e.which ); if( !/[0-9.]/.test( chr ) ) { e.preventDefault(); } } 

It will also disable other important keys, such as input, tab, delete, so you need to add them to the conditional. Not all other keys can be printed and therefore cannot be re-allocated, so you will need to check their e.keyCode. 13, 8, etc.

If you are not too worried about regex, you can do something like

 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(); }); 

Answer 4

I do not think such a plugin is available. The problem is a bit complicated because you have to allow the user to enter some data before applying your regular expression. That is, you cannot just match with each char how it is typed if your regular expression just does not define a character set.

To illustrate, if they enter the payment amount, and you want to allow numbers and decimals based on a single character, what prevents them from entering 99.99.23.42492 ?

On the other hand, if you supply a full regular expression, for example /\d+\.\d{2}/ , then it will not match at all on one character, you will have to allow them to enter a number of characters before trying to apply regex and destroy enter them if it does not match. It can be frustrating.

If you really want to filter the input when you enter it, then you want to allow a digit for the first character, then digits or decimal numbers for subsequent characters until you enter the decimal digit, and then two more digits, and then there is no more input. This is not a general purpose filter.

For example, there is code that will do this, but it is very ugly.

  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; } }); 

And, of course, this will not work if they insert certain values ​​without doing a “real” typing.

Maybe some other approach will work better for you? Like highlighting a field and telling the user if they enter non-digital, not decimal, or if they enter more than one decimal place, rather than filtering the input itself, because it seems messy.

Answer 5

Here is a simple jquery extension that I am using:

 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();