Prem Tiwari - - Freebies, HTML & CSS, JavaScript, 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.
.
Tags: HTML 5, Javasrcipt, Jquery, textbox masking javascript, textbox masking using javascript, Web development
