jQuery Inputmask

jQuery Inputmask是一个JavaScript库，为输入数据创建掩码。Inputmask用于确保输入字段的预定义格式。这个插件对取日期、数字、电话号码等很有用。这个插件有很多功能，使它比其他掩码插件更有用。我们可以用这个插件来创建日期、时间、数字、css单位、url、IP、email等的掩码。

例如，开发人员希望以"{A-za-z0-9}@gmail.com "的格式进行输入。他们可以使用jQuery inputmask来指定这个格式，然后输入框就会以定义的格式输入电子邮件。开发者必须选择所需的输入字段并使用inputmask()插件指定所需的格式。

掩码插件也是用于同样的目的。但在这里，Inputmask插件提供了一些额外的功能和方法，使它更有用途。

CDN 链接:

<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js”></script>

注意：这个链接必须包含在索引页中，以使jQuery的输入掩码功能发挥作用。

以下是使用Inputmask的一些方法。

使用data-inputmask：我们可以定义HTML输入标签的inputmask属性。选项也可以通过数据属性传递。

<input data-inputmask = " 'mask' : 'xx-xxxxxxx'" />

(document).ready(function() {(":input").inputmask();
}

在目标元素上使用插件：所有选项都可以以键值格式传递给inputmask。

$("selector").inputmask("xx-xxxxxxxx");

使用Inputmask类：我们可以使用Inputmask类来定义输入的屏蔽。

var Mask = new Inputmask("XXXX-XXXX");
Mask.mask("selector");

输入掩码的类型：

静态屏蔽：这是一种屏蔽类型，我们只能定义一次屏蔽，在输入过程中不能改变。

$(document).ready( function() { 
    $("selector").inputmask("xx-xxxxxxxx");
});

Jit Masking:我们可以使用jitMasking选项定义这种类型的屏蔽。Jit屏蔽是只对用户输入的值进行屏蔽。

Inputmask("Password", { jitMasking : true }).mask("SELECTOR");

替代者屏蔽：当我们有多个选择来定义屏蔽时，就会使用这种屏蔽。这就像 “或 “掩码。

$(document).ready( function() {
  $("selector").inputmask("XX/XX/XX | XX-XX-XX");
});

选择性遮蔽：在这种类型的遮蔽中，我们可以将遮蔽的某些部分定义为可选部分。我们可以使用[ ]括号来定义可选的部分。

Inputmask( '99/99/99[99]' ,).mask("selector");

预处理屏蔽：在这种类型的屏蔽中，我们可以对我们的结果屏蔽进行预处理。

Inputmask( { mask : function() {
   return Resulting mask;
}).mask("selector");

动态屏蔽：在这种屏蔽中，我们可以使用长度的下限和上限来改变屏蔽的长度。我们可以通过使用{ }这个括号来做到这一点。屏蔽的长度可以从1到5

Inputmask( "9{1,5}-9{1,5}").mask("selector");

Inputmask插件的一些方法如下。

mask():该方法用于为输入值创建掩码。

Inputmask ( {mask: "XX-XXXX-XXXX" }).mask("selector");

remove():该方法用于删除输入的掩码值。

Inputmask.remove("selector");

format( )：我们可以用这个方法为给定的值定义掩码。

var formatedValue = Inputmask.format( "919867543298",
{ alias:"phonenumber", inputFormat: "(91)-99999-99999"});

isComplete()：该方法用于验证值是否完整。

isValid():该方法用于对照掩码验证数值。

let verify = Inputmask.isValid( "(91)-98675-43289" ,
{ alias : "phonenumber" ,inputFormat: "+91-99999-99999"});

例子：在这个例子中，我们将看到一个输入掩码的演示。

<!DOCTYPE HTML>
<html>
 
<head>
 
    <!-- CDN for the Jquery and inputmask plugin -->
    <title>
        JQuery input mask phone
        number validation
    </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>
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
 
    <style>
        body,
        html {
            height: 100%;
            background-repeat: no-repeat;
            background-color: #d3d3d3;
            font-family: 'Oxygen', sans-serif;
        }
 
        .main {
            margin-top: 70px;
        }
 
        h1.title {
            font-size: 50px;
            font-family: 'Passion One', cursive;
            font-weight: 400;
        }
 
        hr {
            width: 10%;
            color: #fff;
        }
 
        .form-group {
            margin-bottom: 15px;
        }
 
        label {
            margin-bottom: 15px;
        }
 
        input,
        input::-webkit-input-placeholder {
            font-size: 11px;
            padding-top: 3px;
        }
 
        .main-login {
            background-color: #fff;
            border-radius: 2px;
            box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
        }
 
        .main-center {
            margin-top: 30px;
            margin: 0 auto;
            max-width: 330px;
            padding: 40px 40px;
        }
 
        i {
            margin-right: 5px;
            padding-top: 10px;
        }
    </style>
</head>
 
<body>
    <div class="container">
        <div class="row main">
            <div class="main-login main-center">
                <form class="form-horizontal"
                    method="post" action="#">
 
                    <div class="form-group">
                        <label for="name"
                            class="cols-sm-2 control-label">
                            User Name
                        </label>
                        <div class="cols-sm-10">
                            <div class="input-group">
                                <span class="input-group-addon">
                                    <i class="fa fa-user fa"
                                        aria-hidden="true"></i>
                                </span>
                                <input type="text" class="form-control"
                                    name="name" id="name"
                                    placeholder="User Name" />
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="email"
                            class="cols-sm-2 control-label">
                            Date of Birth
                        </label>
                        <div class="cols-sm-10">
                            <div class="input-group">
                                <span class="input-group-addon">
                                    <i class="fa fa-birthday-cake fa"
                                        aria-hidden="true"></i>
                                </span>
                                <input type="text" class="form-control"
                                    id="dob" placeholder="XX-XX-XXXX" />
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="password" class="cols-sm-2 control-label">
                            Password
                        </label>
                        <div class="cols-sm-10">
                            <div class="input-group">
                                <span class="input-group-addon">
                                    <i class="fa fa-lock fa-lg"
                                        aria-hidden="true"></i>
                                </span>
                                <input type="password" class="form-control"
                                     name="password" id="password"
                                    placeholder="********" />
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function () {
 
            /* Mask for Geeks Name */
            Inputmask("aaaaaaaaaaaaaaaa", {
 
                placeholder: "-",
                greedy: false,
                casing: "upper",
                jitMasking: true
            }).mask('#name');
 
            /* Mask for Zip code */
            Inputmask("9{2}[-]9{2}[-]9{4}", {
                placeholder: "-",
                greedy: false
            }).mask('#dob');
 
            /* Mask for Password */
            Inputmask("*{8,16}", {
                placeholder: "-",
                greedy: false,
            }).mask('#password');
        });
    </script>
</body>
 
</html>