La manera más fácil para enmascarar caracteres en formato HTML (5) de entrada de texto

Question

¿Tiene HTML5 tiene un tipo de enmascaramiento campo de texto o qué todavía tengo para atrapar onkeydown etc.?

jbabey es correcto - "enmascaramiento", como en el bloqueo de ciertos caracteres no válidos, sin ocultar lo que está escrito.

La mejor (como la manera más simple y más confiable) que he encontrado es atrapar onkeyup y luego simplemente ejecutar una regex reemplazar el valor del campo de texto, eliminando los caracteres ilegales.

Esto tiene algunas ventajas:

1. Es fácil de implementar (una función, dos líneas de código).
2. Es confiable y cubre todos los casos que he pensado.
3. No bloquea los comandos de teclado como copiar/pegar, seleccionar todo o las teclas de flecha.

Pero su principal desventaja es que muestra los caracteres escritos brevemente antes de eliminarlos, lo que hace que parezca muy hackish y poco profesional.

Answer 1

buscar la nueva HTML5 Input Types. Estos instruyen a los navegadores para que realicen el filtrado de datos del lado del cliente, pero la implementación es incompleta en diferentes navegadores. El atributo pattern hará un filtrado de tipo regex, pero, una vez más, los navegadores no lo soportan del todo (o del todo).

Sin embargo, éstos no bloquearán la entrada en sí, sino que simplemente evitará enviar el formulario con los datos no válidos. Todavía tendrá que atrapar el evento onkeydown para bloquear la entrada de clave antes de que se muestre en la pantalla.

Answer 2

Sí, según los diseños de HTML5 se puede utilizar el atributo pattern para especificar la entrada permitido el uso de una expresión regular. Para algunos tipos de datos, puede usar campos de entrada especiales como <input type=email>. Pero estas características todavía carecen de soporte o tienen un apoyo cualitativamente pobre.

Answer 3

1. validación básica se puede realizar seleccionando el atributo tipo de elementos de entrada. Por ejemplo: <input type="email" /> <input type="URL" /> <input type="number" />

2. usando patrón atributo como: <input type="text" pattern="[1-4]{5}" />

3. requerido atributo <input type="text" required />

4. maxlength: <input type="text" maxlength="20" />

5. min & max: <input type="number" min="1" max="4" />

Answer 4

un poco tarde, pero un plugin útil que realmente va a utilizar una máscara para dar un poco más restricción en la entrada del usuario.

<div class="col-sm-3 col-md-6 col-lg-4"> 
    <div class="form-group"> 
    <label for="addPhone">Phone Number *</label> 
     <input id="addPhone" name="addPhone" type="text" class="form-control 
     required" data-mask="(999) 999-9999"placeholder> 
    <span class="help-block">(999) 999-9999</span> 
    </div> 
</div> 

<!-- Input Mask --> 
<script src="js/plugins/jasny/jasny-bootstrap.min.js"></script> 

Más información sobre el plugin http://www.jasny.net/bootstrap/javascript/#inputmask