How To Add Input Mask Using Jquery In Laravel 8


Share:
Published By: Admin, Published On: Nov 10, 2021, Category: Laravel 8 Laravel


Hi Dev,

In this short tutorial we will cover an input mask using jquery. we will help you to give example of jquery input mask example. this example will help you jquery input mask using jquery example. let’s discuss about jquery input mask Using Jquery. Alright, let’s dive into the steps.

Here, i will give you very simple example for adding input mask for input field. you can easily add input mask for field,phone number etc.

we will use jquery.inputmask.bundle js plugin for adding jquery input mask example.

Solution:
$(document).ready(function(){
    $('.phone').inputmask('(999)-999-9999');
});
Example:
<!DOCTYPE html>
<html>
<head>
    <title>How To Add Input Mask Using Jquery In Laravel 8 - MyWebtuts.com</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/css/bootstrap.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js"></script>
</head>
<body>
<div class="container">
    <h1>How To Add Input Mask Using Jquery In Laravel 8 - MyWebtuts.com</h1>
    <div class="form border p-5">
        <strong>Phone Number:</strong>  
        <input type="text" name="phone" class="phone form-control" value="7898978998"><br>
        <strong>Mobile Number:</strong>  
        <input type="text" name="mobile" class="mobile form-control">
    </div>
</div>
<script>
    $(document).ready(function(){
        $('.phone').inputmask('(999)-999-9999');
        $('.mobile').inputmask('(999)-999-9999');
    });
</script>
</body>
</html>
Output:

I hope it can help you...

Share: