How To Add Input Mask Using Jquery In Laravel 8

Laravel

Nov 10, 2021

Hi Dev,

In this short tutorial we will cover an input mask using jquery in laravel. we will help you to give example of jquery input mask in laravel 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 - NiceSnippets.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 - NiceSnippets.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: