jQuery Inputmask es una biblioteca de JavaScript que crea máscaras para los datos de entrada. Inputmask se utiliza para garantizar el formato predefinido del campo de entrada. Este complemento es útil para tomar fechas, números, números de teléfono, etc. Este complemento tiene muchas funcionalidades que lo hacen más útil que el otro complemento de enmascaramiento. Podemos usar este complemento para crear máscaras para fecha, hora, numérico, unidad css, url, IP, correo electrónico, etc.
Por ejemplo, el desarrollador quiere recibir información en el formato de «{A-za-z0-9}@gmail.com» . Pueden especificar este formato usando jQuery inputmask y el campo del cuadro de entrada tomará el correo electrónico, en el formato definido. El desarrollador tiene que seleccionar el campo de entrada deseado y especificar el formato deseado usando el complemento inputmask() .
El complemento de máscara se utiliza para el mismo propósito. Pero aquí el complemento Inputmask proporciona algunas características y métodos adicionales que lo hacen más útil.
Enlace CDN:
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js”></script>
Nota: este enlace debe incluirse en la página de índice para que las funcionalidades de la máscara de entrada de jQuery funcionen.
Las siguientes son algunas formas de usar Inputmask:
Uso de máscara de entrada de datos: podemos definir el atributo de máscara de entrada de la etiqueta de entrada de HTML . La opción también se puede pasar por atributos de datos .
<input data-inputmask = " 'mask' : 'xx-xxxxxxx'" />
$(document).ready(function() {
$(":input").inputmask();
}
Usando el complemento en el elemento de destino: todas las opciones se pueden pasar a la máscara de entrada en formato de valor clave.
$("selector").inputmask("xx-xxxxxxxx");
Usando la clase Inputmask: podemos definir la máscara para la entrada usando la clase Inputmask.
var Mask = new Inputmask("XXXX-XXXX");
Mask.mask("selector");
Tipos de máscara de entrada:
Enmascaramiento estático: este es un tipo de enmascaramiento en el que solo podemos definir la máscara una vez y no cambiar durante la entrada.
$(document).ready( function() {
$("selector").inputmask("xx-xxxxxxxx");
});
Jit Masking: Podemos definir este tipo de enmascaramiento mediante la opción jitMasking . Jit Masking es el enmascaramiento solo para el valor de entrada del usuario.
Inputmask("Password", { jitMasking : true }).mask("SELECTOR");
Enmascaramiento de Alternador: Esta máscara se usa cuando tenemos múltiples opciones para definir la máscara. Esto es como enmascarar «o».
$(document).ready( function() {
$("selector").inputmask("XX/XX/XX | XX-XX-XX");
});
Enmascaramiento Opcional: En este tipo de enmascaramiento, podemos definir alguna parte de la máscara como opcional. Podemos usar corchetes [ ] para definir partes opcionales.
Inputmask( '99/99/99[99]' ,).mask("selector");
Enmascaramiento de preprocesamiento: en este tipo de enmascaramiento, podemos preprocesar nuestra máscara de resultado.
Inputmask( { mask : function() {
return Resulting mask;
}).mask("selector");
Enmascaramiento dinámico: en este tipo de enmascaramiento, podemos cambiar la longitud del enmascaramiento utilizando el límite superior e inferior de longitud. Podemos hacer esto usando { } estos corchetes. La longitud de la máscara puede ser de 1 a 5
Inputmask( "9{1,5}-9{1,5}").mask("selector");
Algunos métodos del complemento Inputmask son los siguientes.
mask(): este método se utiliza para crear la máscara para el valor de entrada.
Inputmask ( {mask: "XX-XXXX-XXXX" }).mask("selector");
remove(): este método se utiliza para eliminar la máscara de entrada de valor.
Inputmask.remove("selector");
format( ): Podemos definir la máscara para un valor dado usando este método.
var formatedValue = Inputmask.format( "919867543298",
{ alias:"phonenumber", inputFormat: "(91)-99999-99999"});
isComplete(): este método se utiliza para verificar si el valor está completo o no.
isValid(): Este método se usa para verificar el valor contra la máscara.
let verify = Inputmask.isValid( "(91)-98675-43289" ,
{ alias : "phonenumber" ,inputFormat: "+91-99999-99999"});
Ejemplo: En este ejemplo, veremos una demostración de la máscara de entrada.
HTML
<!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>
Producción:
máscara de entrada jQuery
Publicación traducida automáticamente
Artículo escrito por satyam00so y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA