By Prem Tiwari in Freebies, HTML & CSS, JavaScript, Web Technologies. Updated on
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.
.Sharing is caring!
Tags: HTML 5, Javasrcipt, Jquery, textbox masking javascript, textbox masking using javascript, Web development
