Input Masks Code - Tutorial # 02

 Input Mask:

     Input masks are used to format the text input by the user

    Like if a user enter credit card number: 4444333322221111

Mask will covert it into 4444 3333 2222 1111 depending upon your settings or customization

Plugin:

    We use two plugins to add this feature to our website

         1. J Query

        2.  Masked Input

We have to add these 2 plugins in our HTML file.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js" integrity="sha512-d4KkQohk+HswGs6A1d6Gak6Bb9rMWtxjOa0IiY49Q3TeFd5xAzjWXDCBW9RS7m86FQ4RzM2BdHmdJnnKRYknxw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Example Code:

 This is example HTML code:

<form action="POST"> Enter Number: <input type="text" id="phone"> <br> <br> Credit Card: <input type="text" name="" id="creditCard"> <br> <br> Date: <input type="date" name="" id=""> </form>

Following is example JavaScript Code

$(document).ready(function(){ $("#phone").mask("9999-9999999") $("#creditCard").mask("9999 9999 9999 9999", {placeholder:"XXXX XXXX XXXX XXXX"}) })