Input mask plugin for input - jquery maskedinput - instructions, settings, initialization

Currently, many websites provide the ability to submit feedback forms, some of the fields of which are designed to convey contact details or other typical information. Very often it is important that this data comes to the server in a single format. This article will look at solving this problem using the Masked Input plugin, which is simple and easy to use.

Distinctive features and capabilities of the Masked Input plugin:

• ease of use
• flexible setup
• ability to control functions enable/disable/set parameters 
• validation/read support
• regular expression support
• checking element for padding/formatting

The input field masks plugin consists of the main parts:

• Demo HTML markup
• JQuery script with plugin code

Example of installing the Masked Input plugin

Download the archive with the plugin from the developer's repository and copy its contents to your site directory.

!!! For the script to work, you must have the jQuery library connected.

Initialization and configuration of the Masked Input plugin.

Connect the jQuery framework and the plugin itself to the document. Please note that earlier versions of the plugin may not work with later versions of jquery.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.maskedinput.js"></script>

To connect a mask to an input field, you need to add the corresponding class or id:

<form action="/">  
	<input class="date" type="text" name="name"><br>  
	<input class="phone" type="text" name="name"><br>  
	<input class="phoneext" type="text" name="name"><br>  
	<input class="tin" type="text" name="name"><br>  
	<input class="ssn" type="text" name="name"><br>  
	<input class="product" type="text" name="name"><br>  
	<input class="eyescript" type="text" name="name"><br>  
	<button type="submit" name="submitbtn" value="Send">Send</button>  
</form>

And initialize the input mask plugin:

<script>
jQuery(function($){
	$('.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");
	$(".eyescript").mask("~9.99 ~9.99 999");
});
</script>

Basic conventions:

• a - letters
• 9 - numbers
• * - letters and numbers
• ? - optional part of the mask

Part of the mask can be variable. Symbol "?" marks all characters following it as optional, i.e. everything after it is considered optional for entry. Example:

$('.phoneext').mask("(999) 999-9999? x99999");

Additional plugin settings

1. Ability to create your own character sets for input.

To create character sets, use the definitions property, example:

<script>
$(document).ready(function(){
	$.mask.definitions['~']='[+-]';
	$(".eyescript").mask("~9.99 ~9.99 999");
})
</script>

2. Perform an action after the input is completed.

Once the input is complete, you can execute the function using the completed method, example:

<script>  
$(document).ready(function(){  
	$(".ssn").mask("999-99-9999",{completed:function(){alert("Field is filled!")}});  
});  
</script>  

3. Placeholder substitution in the input field.

Using the placeholder property, you can place a placeholder on the current input field, example:

<script>
$(document).ready(function(){
	$(".date").mask("99/99/9999",{placeholder:"mm/dd/yyyy"});
})
</script>

Conclusion

Perhaps this is all the information you need to effectively use the jquery MaskedInput plugin. Thank you all for your attention!