How To Mask Input Using CSS And Jquery: Hi friends, today I will tell you about input masking with css and jquery. Generally you have seen the credit card, phone number, fax, zip code input boxes in which some text is written like extension of phone number or some code.
You can also write some characters in the input field to help the user, you have seen the coupan code of some website in which some characters have written already.
You can see the live demo of sliding div and download the code from below
Phone Number
(0124)-999-9999
Mobile Number
(+91)-99999-99999
Birth Date
21/11/1992
Date
21/11/2016
Time
10:01:54
Zip Code
123456
Credit Card
1234/5678/9101/1123
Tax ID
01-2345678
SSN
999-99-99999
Coupan Code
ABCD-8989-7878-2323
For Masking any input field for giving the user clear picture of date, phone, credit card format. You have to click on the input field and you can see the format. To do input masking you can paste some code in the webpage. These code are
I have made some of the useful input field using bootstrap. some of the fields are phone number, mobile, tax id, ssn etc.
<div class="row form-horizontal"> <div class="col-md-12"> <div class="form-group"> <label class="col-lg-3 text-right" for="phone">Phone Number:</label> <input class="col-lg-6" type="text" class="form-control" id="phone"> <label class="col-lg-3" for="phone">(0124)-999-9999</label> </div> </div> <div class="col-md-12"> <div class="form-group"> <label class="col-lg-3 text-right" for="mobile">Mobile Number:</label> <input class="col-lg-6" type="text" class="form-control" id="mobile"> <label class="col-lg-3" for="mobile">(+91)-99999-99999</label> </div> </div> <div class="col-md-12"> <div class="form-group"> <label class="col-lg-3 text-right" for="bd">Birth Date:</label> <input class="col-lg-6" type="text" class="form-control" id="bd"> <label class="col-lg-3" for="bd">21/11/1992</label> </div> </div> <div class="col-md-12"> <div class="form-group"> <label class="col-lg-3 text-right" for="date">Date:</label> <input class="col-lg-6" type="text" class="form-control" id="date"> <label class="col-lg-3" for="date">21/11/2016</label> </div> </div> <div class="col-md-12"> <div class="form-group"> <label class="col-lg-3 text-right" for="time">Time:</label> <input class="col-lg-6" type="text" class="form-control" id="time"> <label class="col-lg-3" for="time">10:01:54</label> </div> </div> </div> <div class="row form-horizontal"> <div class="col-md-12"> <div class="form-group"> <label class="col-lg-3 text-right" for="zip">Zip Code:</label> <input class="col-lg-6" type="text" class="form-control" id="zip"> <label class="col-lg-3" for="zip">123-456</label> </div> </div> <div class="col-md-12"> <div class="form-group"> <label class="col-lg-3 text-right" for="credit">Credit Card:</label> <input class="col-lg-6" type="text" class="form-control" id="credit" data-inputmask="'mask': '9999 9999 9999 9999'"> <label class="col-lg-3" for="credit">1234/5678/9101/1123</label> </div> </div> <div class="col-md-12"> <div class="form-group"> <label class="col-lg-3 text-right" for="tax">Tax ID:</label> <input class="col-lg-6" type="text" class="form-control" id="tax"> <label class="col-lg-3" for="tax">01-2345678</label> </div> </div> <div class="col-md-12"> <div class="form-group"> <label class="col-lg-3 text-right" for="ssn">SSN:</label> <input class="col-lg-6" type="text" class="form-control" id="ssn"> <label class="col-lg-3" for="ssn">999-99-99999</label> </div> </div> <div class="col-md-12"> <div class="form-group"> <label class="col-lg-3 text-right" for="coupan">Coupan Code:</label> <input class="col-lg-6" type="text" class="form-control" id="coupan"> <label class="col-lg-3" for="coupan">ABCD-8989-7878-2323</label> </div> </div> </div> |
<div class="row form-horizontal"> <div class="col-md-12"> <div class="form-group"> <label class="col-lg-3 text-right" for="phone">Phone Number:</label> <input class="col-lg-6" type="text" class="form-control" id="phone"> <label class="col-lg-3" for="phone">(0124)-999-9999</label> </div> </div> <div class="col-md-12"> <div class="form-group"> <label class="col-lg-3 text-right" for="mobile">Mobile Number:</label> <input class="col-lg-6" type="text" class="form-control" id="mobile"> <label class="col-lg-3" for="mobile">(+91)-99999-99999</label> </div> </div> <div class="col-md-12"> <div class="form-group"> <label class="col-lg-3 text-right" for="bd">Birth Date:</label> <input class="col-lg-6" type="text" class="form-control" id="bd"> <label class="col-lg-3" for="bd">21/11/1992</label> </div> </div> <div class="col-md-12"> <div class="form-group"> <label class="col-lg-3 text-right" for="date">Date:</label> <input class="col-lg-6" type="text" class="form-control" id="date"> <label class="col-lg-3" for="date">21/11/2016</label> </div> </div> <div class="col-md-12"> <div class="form-group"> <label class="col-lg-3 text-right" for="time">Time:</label> <input class="col-lg-6" type="text" class="form-control" id="time"> <label class="col-lg-3" for="time">10:01:54</label> </div> </div> </div> <div class="row form-horizontal"> <div class="col-md-12"> <div class="form-group"> <label class="col-lg-3 text-right" for="zip">Zip Code:</label> <input class="col-lg-6" type="text" class="form-control" id="zip"> <label class="col-lg-3" for="zip">123-456</label> </div> </div> <div class="col-md-12"> <div class="form-group"> <label class="col-lg-3 text-right" for="credit">Credit Card:</label> <input class="col-lg-6" type="text" class="form-control" id="credit" data-inputmask="'mask': '9999 9999 9999 9999'"> <label class="col-lg-3" for="credit">1234/5678/9101/1123</label> </div> </div> <div class="col-md-12"> <div class="form-group"> <label class="col-lg-3 text-right" for="tax">Tax ID:</label> <input class="col-lg-6" type="text" class="form-control" id="tax"> <label class="col-lg-3" for="tax">01-2345678</label> </div> </div> <div class="col-md-12"> <div class="form-group"> <label class="col-lg-3 text-right" for="ssn">SSN:</label> <input class="col-lg-6" type="text" class="form-control" id="ssn"> <label class="col-lg-3" for="ssn">999-99-99999</label> </div> </div> <div class="col-md-12"> <div class="form-group"> <label class="col-lg-3 text-right" for="coupan">Coupan Code:</label> <input class="col-lg-6" type="text" class="form-control" id="coupan"> <label class="col-lg-3" for="coupan">ABCD-8989-7878-2323</label> </div> </div> </div>
Jquery code is used to give them functionality for input masking. In the jquery code you define the format, you can define any special characters and for user input you have to write 9 (Nine).
In this i have used one input masking cdn of a plugin to make the .mask function work properly.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script> <script> $(document).ready(function(){ $.mask.definitions['~']='[+-]'; $("#phone").mask("(9999) 9999-999"); $("#mobile").mask("(+99)-99999-99999"); $("#bd").mask("99/99/9999"); $("#date").mask("99/99/9999"); $("#time").mask("99:99:99"); $("#zip").mask("999-999"); $("#credit").mask("9999/9999/9999/9999"); $("#tax").mask("99-9999999"); $("#ssn").mask("999-99-99999"); $("#coupan").mask("ABCD-9999-9999-9999"); }); </script> |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script> <script> $(document).ready(function(){ $.mask.definitions['~']='[+-]'; $("#phone").mask("(9999) 9999-999"); $("#mobile").mask("(+99)-99999-99999"); $("#bd").mask("99/99/9999"); $("#date").mask("99/99/9999"); $("#time").mask("99:99:99"); $("#zip").mask("999-999"); $("#credit").mask("9999/9999/9999/9999"); $("#tax").mask("99-9999999"); $("#ssn").mask("999-99-99999"); $("#coupan").mask("ABCD-9999-9999-9999"); }); </script>
For any problem you can see the live demo and download the code from below.
Read About Other Interesting Things about jquery below.
I hope you will like How To Mask Input Using CSS And Jquery. If You found it useful please subscribe my blog.
Categories: Website Design
Leave a Reply