By: Prem Tiwari | Last Updated: | In: Freebies, HTML & CSS, Javascript & Ajax, Web Technologies
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 3 | <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 13 | <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.
.
Prem Tiwari is the founder of FreeWebMentor.com and also a professional developer who has vast experience in PHP and open source technologies. Apart from this, he is a blogger by hobby and also he has been a regular speaker of WordPress sessions in various IT Companies. View all posts by Prem Tiwari
HTML 5, Javasrcipt, Jquery, textbox masking javascript, textbox masking using javascript, Web development
