Click here to Skip to main content
Click here to Skip to main content

Tagged as

Masked Input Plugin part 2

, 22 Jul 2011
Rate this:
Please Sign up or sign in to vote.
First, include the jQuery and masked input javascript files.
<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.
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)

Share

About the Author

Nicky Enriquez Torres
Web Developer
Peru Peru
I'm student of the JORGE BASADRE'S UNIVERSITY

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web04 | 2.8.140821.2 | Last Updated 22 Jul 2011
Article Copyright 2011 by Nicky Enriquez Torres
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid