Click here to Skip to main content
15,882,017 members
Articles / Programming Languages / Javascript
Tip/Trick

Masked Input Plugin part 2

Rate me:
Please Sign up or sign in to vote.
0.00/5 (No votes)
22 Jul 2011CPOL 12.6K   2  
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)


Written By
Web Developer Telefonica del Peru
Peru Peru
This member doesn't quite have enough reputation to be able to display their biography and homepage.

Comments and Discussions

 
-- There are no messages in this forum --