This is a useful jQuery plugin for creating customization Masks Input boxes that allow users to control how data being entered into your text input fields is formatted. Visit the demo page to see the examples and more features.
There are just a few steps:
1. Include JS files.
1 2 | <script type='text/javascript' src='js/jquery.js?ver=1.11.0'></script> <script type="text/javascript" src="js/jquery.maskedinput.min.js"></script> |
2. Write minimum jquery code.
1 2 3 4 5 6 7 8 9 10 11 12 | <script type="text/javascript"> jQuery(function($) { $.mask.definitions['~']='[+-]'; $('#date').mask('99/99/9999'); $('#phone').mask('(999) 999-9999'); $('#phoneext').mask("(999) 999-9999? x99999"); $("#tin").mask("99-9999999"); $("#ssn").mask("999-99-9999"); $("#product").mask("a*-999-a999",{placeholder:" ",completed:function(){alert("You typed the following: "+this.val());}}); $("#eyescript").mask("~9.99 ~9.99 999"); }); </script> |
3. Simple Html Code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <table align="center" border="0" class="tbl_cls"> <tbody> <tr><td>Date</td> <td><input id="date" tabindex="1" type="text" /></td> <td>99/99/9999</td></tr> <tr><td>Phone</td> <td><input id="phone" tabindex="3" type="text" /></td> <td>(999) 999-9999</td></tr> <tr> <td>Phone + Ext</td> <td><input id="phoneext" tabindex="4" type="text" /></td> <td>(999) 999-9999? x99999</td> </tr> <tr> <td>Tax ID</td> <td><input id="tin" tabindex="5" type="text" /></td> <td>99-9999999</td></tr> <tr> <td>SSN</td> <td><input id="ssn" tabindex="6" type="text" /></td> <td>999-99-9999</td> </tr> <tr> <td>Product Key</td> <td><input id="product" tabindex="7" type="text" /></td> <td>a*-999-a999</td> </tr> <tr> <td>Eye Script</td> <td><input id="eyescript" tabindex="8" type="text" /></td> <td>~9.99 ~9.99 999</td> </tr> </tbody> </table> |
4. Additionaly you can add a number after n or az to limit the maximun characters users can write.
If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.
Article Tags: HTML 5, Javasrcipt, Jquery, textbox masking javascript, textbox masking using javascript, Web development