Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / Languages / Javascript

Masked Input Plugin part 2

0.00/5 (No votes)
22 Jul 2011CPOL 12.7K  
First, include the jQuery and masked input javascript files.
Java
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.maskedinput.js" type="text/javascript"></script>

Next, call the mask function for those items you wish to have masked.
Java
jQuery(function($){
   $("#date").mask("99/99/9999");
   $("#phone").mask("(999) 999-9999");
   $("#tin").mask("99-9999999");
   $("#ssn").mask("999-99-9999");
});

Optionally, if you are not satisfied with the underscore ('_') character as a placeholder, you may pass an optional argument to the maskedinput method.
jQuery(function($){
      $("#product").mask("99/99/9999",{placeholder:" "});
   });

Optionally, if you would like to execute a function once the mask has been completed, you can specify that function as an optional argument to the maskedinput method
jQuery(function($){
   $("#product").mask("99/99/9999",{
      completed:function(){
         alert("You typed the following: "+this.val());
      }
   });
});

You can now supply your own mask definitions.
jQuery(function($){
   $.mask.definitions['~']='[+-]';
   $("#eyescript").mask("~9.99 ~9.99 999");
});

You can have part of your mask be optional. Anything listed after '?' within the mask is considered optional user input. The common example for this is phone number + optional extension.
jQuery(function($){
   $("#phone").mask("(999) 999-9999? x99999");
});

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)