How to Add Input Mask using Jquery in Laravel 9?

Apr 16, 2022 . Admin

Hi Dev,

This article will provide some of the most important example how to add input mask using jquery in laravel 9. you can see laravel 9 input mask using jquery. we will help you to give example of input mask using jquery. We will look at example of input mask. Follow bellow tutorial step of how to make input mask in laravel 9.

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.

Download Laravel

Let us begin the tutorial by installing a new laravel application. if you have already created the project, then skip following step.

composer create-project laravel/laravel example-app
Solution
$(document).ready(function(){
    $('.phone').inputmask('(999)-999-9999');
});
Example
<!DOCTYPE html>
<html>
<head>
    <title>How To Add Input Mask Using Jquery In Laravel 9 - 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 9 - 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...

#Laravel 9