Text box Input Masked Plugin for certain input data format

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.

Main Features

Accepts any pattern order you would like to use
In case of dates, it will validates days out of range, and even leap years
You can use a custom function to handle the non validating inputs
It will write down any token automatically while you are typing.
In erasing, tokens will be omitted, and while you are re-typing, them are going to ve pass over

mask-textbox

How to use jquery.maskedinput.min.js?

There are just a few steps:

1. Include JS files.

<script type='text/javascript' src='js/jquery.js?ver=1.11.0'></script>
<script type="text/javascript" src="js/jquery.maskedinput.min.js"></script>

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.

<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>

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.

<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>

<tbody>

<tr><td>Phone</td>

<tr> <td>Phone + Ext</td>

<tr> <td>Product Key</td>

<tr> <td>Eye Script</td>

</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.

Text box Input Masked Plugin for certain input data format

Main Features

How to use jquery.maskedinput.min.js?

Recommended Posts:

webmentor