January 15, 2024 5:04 am

How to Mask an input box in jQuery

Today i have some requirement for masking on one of my project and i have used a masking lightweight library and i love it. So i have decided to write about it on PHPGang. Masking allows users to easily fix width of input boxes where you require input from user in a pacific format like dates, phone numbers etc.

Input-Masking

[wpdm_file id=28]DEMO

Follow blow given instructions and implement masking in you website.

How to use it:

Include jQuery Library and jQuery Input Mask plugin.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="dist/jquery.inputmask.bundle.min.js"></script>

Define your masks in your input boxes usingĀ data-inputmask attribute.

<input data-inputmask="'alias': 'date'" />
<input data-inputmask="'mask': '99-9999999'" />

Call the plugin

<script>
$(document).ready(function(){
    $(":input").inputmask();
});
</script>

 

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.


Tutorial Categories:

One response to “How to Mask an input box in jQuery”

  1. Lavish says:

    wow its awsome

Leave a Reply

Your email address will not be published. Required fields are marked *