Biblioteca de enmascaramiento de entrada accesible-masking-Input. js
| Autor: | estelle |
|---|---|
| Views Total: | 3,089 |
| Sitio oficial: | Ir a la web |
| Actualizado: | December 1, 2016 |
| Licencia: | MIT |
Vista prévia
Descripción
Input-Mask. js es una biblioteca JS ligera, multiplataforma y progresivamente mejorada que tiene la capacidad de validar y enmascarar los campos de entrada con soporte de accesibilidad.
El atributo de marcador de posición, disponible para < > TextArea y varios tipos de > de entrada <, proporciona una sugerencia que describe el valor esperado de un control de formulario. Por ejemplo, un desarrollador puede decirle a un navegador que muestre XXXXX-XXXX para una entrada que requiera un código postal americano de formato largo, o (XXX) XXX-XXXX para una entrada que requiera un número de teléfono de estilo norteamericano. El atributo placeholder se introdujo en HTML5 y se ha soportado desde IE 10.
De forma predeterminada, el marcador de posición aparece como texto gris dentro de un campo de entrada. El marcador de posición desaparece cuando el valor se convierte en no vacío.
Debido a la incapacidad de estilo fácilmente el marcador de posición y porque desaparece en la entrada de datos, los diseñadores y desarrolladores han estado pidiendo un marcador de posición permanente y styleable que demarca los datos que el usuario puede escribir en un cuadro de texto. Han estado pidiendo "enmascaramiento de entrada" â & #128; & #148; una cadena de caracteres que representa el formato de datos esperado que se actualiza a medida que el usuario ingresa el valor, mostrando continuamente una pista sobre los caracteres necesarios restantes. Por último, hay una solución accesible para esta demanda.
Accessibility & Placeholder
Antes de sumergirnos en una nota sobre accesibilidad: no utilice el atributo de marcador de posición como reemplazo de una etiqueta de < >, ya que al hacerlo se reduce la accesibilidad y la usabilidad del control de formulario. Mientras la etiqueta se muestra en todo momento, el marcador de posición solo se muestra antes de que el usuario escriba un valor.
El marcador de posición no es una alternativa para < etiqueta > ni para el atributo title .
Para cada campo de texto, casilla de verificación, botón de opción y menú desplegable, incluya siempre una etiqueta de < asociada > que describa su propósito. Asociar una etiqueta de < > con cada control de formulario mejora la accesibilidad al proporcionar un área grande y clicable para que los usuarios del mouse accedan al control del formulario, y al garantizar que las tecnologías de asistencia (AT) informen correctamente al usuario del propósito de una forma enfocada Control. La sugerencia dada por la etiqueta siempre es leída por AT, a menos que los atributos de ARIA proporcionen alternativas.
Cuando se requieren datos de entrada para que coincidan con un patrón específico, incluya siempre un atributo title que describa el patrón esperado.
Funcionamiento
Sólo tiene que incluir el archivo JavaScript masking-Input. js en el documento y la biblioteca de entrada de enmascaramiento está lista para su uso. El atributo Data-autoinit se utiliza para determinar si se inicializa automáticamente la biblioteca o no.
<script src="js/masking-input.js" data-autoinit="true"></script>
Establezca las máscaras de entrada y las reglas de validación de la siguiente manera:
<label for="expiration">Credit Card Expiration Month</label>
<input id="expiration" type="tel" placeholder="MM/YY" class="masked" pattern="(1[0-2]|0[1-9])\/\d\d" data-valid-example="11/18" title="2-digit month and 2-digit year greater than 01/15">
<label for="zip">Zip Code</label>
<input id="zip" type="tel" name="zipcode" placeholder="XXXXX" pattern="\d{5}" class="masked" title="5-digit zip code">
<label for="zipca">Canadian Zip Code</label>
<input id="zipca" type="text" name="zipcodeca" placeholder="XXX XXX" pattern="\w\d\w \d\w\d" class="masked" data-charset="_X_ X_X" title="6-character alphanumeric zip code in the format of A1A 1A1">
<label for="tel">Telephone</label>
<input id="tel" type="tel" name="phone" placeholder="(XXX) XXX-XXXX" pattern="\(\d{3}\) \d{3}\-\d{4}" class="masked" title="10-digit number">
<label for="cc">Credit Card Number</label>
<input id="cc" type="tel" name="ccnumber" placeholder="XXXX XXXX XXXX XXXX" pattern="\d{4} \d{4} \d{4} \d{4}" class="masked" title="16-digit number">
