jQuery mask es un complemento de jQuery que ayuda a poner una máscara en los campos de entrada HTML básicos y otros elementos. Si el desarrollador quiere que el campo de entrada tome entradas solo en un formato determinado, puede usar el complemento de máscara jQuery para ello. Este tipo de funcionalidad también se puede crear utilizando un lenguaje de back-end como PHP. Sin embargo, será mucho más eficiente en cuanto a tiempo y memoria si se cuida desde el front-end.
Por ejemplo, suponga que el desarrollador desea que los usuarios ingresen su número de teléfono móvil de 10 dígitos en el formato (xxx)-xxx-xxxx . Pueden especificar este formato usando jQuery Mask y el campo del cuadro de entrada tomará los números, automáticamente en el formato definido. Todo lo que el desarrollador tiene que hacer es seleccionar el cuadro de entrada apropiado usando el selector jQuery $ y luego especificar el formato deseado usando la función mask().
Transiciones de máscara: las transiciones de máscara predeterminadas disponibles son:
- ‘0’: {patrón: /\d/}
- ‘A’: {patrón: /[a-zA-Z0-9]/}
- ‘9’: {patrón: /\d/, opcional: verdadero}
- ‘S’: {patrón: /[a-zA-Z]/}
- ‘#’: {patrón: /\d/, recursivo: verdadero}
Enlace CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.js"
integrity="sha256-yE5LLp5HSQ/z+hJeCqkz9hdjNkk1jaiGG0tDCraumnA="
crossorigin="anonymous"
></script>
Este enlace debe incluirse en la página de índice para que las funcionalidades de la máscara jQuery funcionen.
Ejemplo:
<!Doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1,
shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.js"
integrity=
"sha256-yE5LLp5HSQ/z+hJeCqkz9hdjNkk1jaiGG0tDCraumnA="
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity=
"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity=
"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous">
</script>
<style>
body {
padding: 2%;
}
</style>
</head>
<body>
<h2>jQuery Mask</h2>
<br>
<p>
<label>
Date Example
<input type="text"
name="date" />
</label>
</p>
<p>
<label>
ZIP Code Example
<input type="text"
name="zip-code" />
</label>
</p>
<p>
<label>
Mobile Number Example
<input type="text"
name="mobile-number" />
</label>
</p>
<p>
<label>
Policy Number Example
<input type="text"
name="policy-number"
data-mask="00-00-0000-0000" />
</label>
</p>
<script>
$('input[name="date"]').mask('0000/00/00');
$('input[name="zip-code"]').mask('S0S 0S0');
$('input[name="mobile-number"]').mask('(00) 0000 0000');
$('input[name="postal-code"]').focusout(function() {
$('input[name="postal-code"]').val(this.value.toUpperCase());
});
</script>
</body>
</html>
Producción
Explicación:
- Fecha: en el código fuente anterior, se puede ver que el formato de entrada para la fecha se especifica como 0000/00/00 . Ahora, el usuario ingresa los números de fecha y el campo de entrada tomará automáticamente los números en el formato especificado.
- Código postal: de manera similar para el código postal, el formato especificado es S0S 0S0 . Después de eso, se crea una función que cambiará automáticamente todos los valores en minúsculas ingresados al formato de mayúsculas.
- Número de móvil: el formato especificado es (00) 0000 0000 . El corchete pequeño y el espacio adecuado se aplicarán automáticamente una vez que el usuario comience a ingresar su número de teléfono móvil.
- Número de póliza: el formato HTML en línea especificado es 00-00-0000-0000 . El número de póliza se ingresa automáticamente en este formato especificado.
Publicación traducida automáticamente
Artículo escrito por sanchit496 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA