does jquery have any plugin that prevents entering any input to a textbox that doesnt match a regexp pattern. for example , i have a textbox for entering payment amount, i want user t be able to enter only numebers and . in the textbox, all other input wont have any effect on the textbox..

thanks

does jquery have any plugin that prevents entering any input to a textbox that doesnt match a regexp pattern. for example , i have a textbox for entering payment amount, i want user t be able to enter only numebers and . in the textbox, all other input wont have any effect on the textbox..

thanks

• javascript
• jquery
• jquery-plugins

5 Answers 5

Masked Input Plugin

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

jquery-keyfilter plugin - does what is needed.

I don't think there is any such plugin readily available. The problem is a little tricky, because you have to allow the user to type some input before applying your regex. That is, you can't just match against each char as it is typed, unless your regex simply defines a set of characters.

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

On the other hand, if you supply a complete regex like /\d+\.\d{2}/, then it won't match at all on a single character, you'll have to allow them to type some number of characters before trying to apply the regex and wiping out their input if it doesn't match. That could be frustrating.

If you really want to filter the input as they type, then you want to allow a digit for the first character, then digits or a decimal for subsequent characters until the decimal is entered, and then two more digits, and then no more input. It's not a general-purpose filter.

For example, here's some code that will do that, but it's 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 won't work if they happen to paste in certain values without doing "real" typing.

Maybe some other approach would work better for you? Like highlighting the field and indicating to the user if they enter a non-digit, non-decimal, or if they enter more than one decimal, rather than filtering the input itself, because that seems messy.

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

The difficulty that concerns you is this:

Identifying Keys
When you catch a keyboard event, you may wish to know which key was pressed. If so, you may be asking too much. This is a very big mess of browser incompatibilities and bugs.
From the first link above

All the same, in jQuery I'd do this:

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

This will also disable other important keys like enter, tab, delete, so they need to be added into the conditional. Not all the other keys are printable and so can't be regexed, so you'll have to check for their e.keyCode. 13, 8 etc.

If you're not too bothered about the regex you could 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();
});

Here is a simple jquery extension I use:

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