Enmascaramiento de texto de entrada sin un complemento usando JavaScript
- Enmascaramiento de entrada para números de tarjetas de crédito en JavaScript
- Enmascaramiento de entrada de código postal en JavaScript
- Número de teléfono con enmascaramiento de entrada de paréntesis en JavaScript
- Personalice el enmascaramiento de entrada para diferentes campos en JavaScript
La máscara de entrada de JavaScript o el cuadro de texto enmascarado es un control que proporciona una manera fácil y confiable para que el usuario recopile entradas en función de una máscara estándar. Por ejemplo, le permite capturar números de teléfono, valores de fechas, números de tarjetas de crédito y otros valores de formato estándar.
Es posible que necesite permitir que los usuarios ingresen solo los datos específicos en un formato particular en ciertos escenarios. Por ejemplo, los códigos postales y las entradas de tarjetas de crédito están dentro de un patrón específico en el que puede restringir formatos de datos particulares.
La biblioteca de enmascaramiento de entrada permite al usuario enmascarar un campo de entrada utilizando un formato de entrada de datos particular.
Este módulo de JavaScript para enmascarar campos de entrada hará entradas de espacios, guiones y otros caracteres automáticamente. Como resultado, los usuarios pueden concentrarse únicamente en ingresar números o letras.
Esto es especialmente beneficioso cuando los operadores de entrada de datos que utilizan una interfaz web deben realizar muchas entradas.
Al revisar los ejemplos que se dan a continuación, aprenderá cómo configurar esta biblioteca en su página web.
Enmascaramiento de entrada para números de tarjetas de crédito en JavaScript
En este ejemplo, se proporciona un formato general para la tarjeta de crédito. El usuario puede intentar ingresar números y letras sin ingresar los espacios.
Verá que los espacios se agregan automáticamente, como se muestra en la captura de pantalla a continuación.
Puede acceder al código de este ejemplo a continuación.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/masking-input/masking-input.css"/>
<style>
/* additional styles */
li {line-height: 2; clear: both;}
label {display: inline-block; width: 200px;}
.shell span {color: pink;}
li {font-family: helvetica; font-size: 0.93rem;}
</style>
</head>
<body>
<ul>
<li>
<label for="cc">Credit Card Number</label>
<input id="cc" type="tel" name="ccnum" placeholder ="XXXX XXXX XXXX XXXX" pattern="\d{4} \d{4} \d{4} \d{4}" class="masked" title="Enter the 16 digits of credit card">
</li>
</ul>
<script src="js/maskinginput/maskinginput.js" data-autoinit="true"></script>
</body>
</html>
Enmascaramiento de entrada de código postal en JavaScript
El código postal es una combinación de alfanumérico, por lo que este es un caso interesante para el enmascaramiento de entrada. El marcador de posición para ingresar el código postal está hecho para que un usuario sepa si se requiere un carácter o un número.
Vea la captura de pantalla a continuación.
En lugar de usar X en el marcador de posición, vio que se usó A1B2C3, por lo que conoce el formato requerido. Tampoco necesita ingresar al espacio; Siga ingresando el código en el formato correcto.
El marcado para crear el campo enmascarado de entrada de código postal se proporciona a continuación.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/masking-input/masking-input.css"/>
<style>
/* additional styles */
li {line-height: 2; clear: both;}
label {display: inline-block; width: 200px;}
.shell span {color: pink;}
li {font-family: helvetica; font-size: 0.93rem;}
</style>
</head>
<body>
<ul>
<li>
<label for="zipca">Enter zip code</label>
<input id="zipca" type="text" name="zipcode" placeholder="A1B2C3" pattern="\w\d\w\d\w\d" class="masked" datacharset="_X_ X_X" title="Enter zip code">
</li>
</ul>
<script src="js/mask-input/mask-input.js" data-autoinit="true"></script>
</body>
</html>
Número de teléfono con enmascaramiento de entrada de paréntesis en JavaScript
En este ejemplo, el campo de teléfono estará enmascarado y el script administrará los paréntesis. Esto se muestra en la siguiente captura de pantalla.
El código para esto se da a continuación.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/masking-input/masking-input.css"/>
<style>
/* additional styles */
li {line-height: 2; clear: both;}
label {display: inline-block; width: 200px;}
.shell span {color: pink;}
li {font-family: helvetica; font-size: 0.93rem;}
</style>
</head>
<body>
<ul>
<li>
<label for="tel">Enter Phone</label>
<input id="tel" type="tel" name="phone number" placeholder="(XXX) XXX-XXXX" pattern="\(\d{3}\) \d{3}\-\d{4}" class="masked" title="Enter number without parenthesis">
</li>
</ul>
<script src="js/mask-input/mask-input.js" data-autoinit="true"></script>
</body>
</html>
Personalice el enmascaramiento de entrada para diferentes campos en JavaScript
Lo más importante a tener en cuenta en todos los casos anteriores es la definición del patrón. Por ejemplo, el siguiente patrón se coloca en el campo de entrada en el ejemplo de teléfono anterior.
pattern = '\(\d{3}\) \d{3}\-\d{4}'
Si desea permitir que los usuarios ingresen cuatro dígitos entre paréntesis en lugar de 3, cámbielo a 4. Para mostrar cómo personalizar los campos de entrada, también agregará otro guión, así es como se ve el patrón:
pattern = '\(\d{4}\) \d{3}\--\d{4}'
El usuario también deberá realizar cambios en el marcador de posición de la siguiente manera.
placeholder = '(XXXX) XXX--XXXX'
La captura de pantalla para esto se da a continuación.
El código para esto se da a continuación.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/masking-input/masking-input.css"/>
<style>
/* additional styles */
li {line-height: 2; clear: both;}
label {display: inline-block; width: 200px;}
.shell span {color: pink;}
li {font-family: helvetica; font-size: 0.93rem;}
</style>
</head>
<body>
<ul>
<li>
<label for="tel">Enter Phone</label>
<input id="tel" type="tel" name="phone number" placeholder="(XXXX) XXX--XXXX" pattern="\(\d{4}\) \d{3}\--\d{4}" class="masked" title="Enter number without parenthesis">
</li>
</ul>
<script src="js/mask-input/mask-input.js" data-autoinit="true"></script>
</body>
</html>
De igual forma, el usuario también puede realizar los cambios agregando los números o caracteres en el formato requerido.