How To Mask Input Using CSS And Jquery

How To Mask Input Using CSS And Jquery

December 2, 2016 No comments Article SEO Website Designing

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.

How To Mask Input Using CSS And Jquery Live Demo:

You can see the live demo of sliding div and download the code from below

SEO Website Designing Live Demo      SEO Website Designing Download

Some Example of Input Masking are:

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



How To Mask Input Using CSS And Jquery

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

Bootstrap HTML Code:

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>


Jquery Code:

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>

For any problem you can see the live demo and download the code from below.

SEO Website Designing Live Demo      SEO Website Designing Download

Now you know about How To Mask Input Using CSS And Jquery.

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