javascript - bootstrap - La forma más fácil de enmascarar caracteres en la entrada de texto HTML(5)

select html

Question

¿Tiene HTML5 algún tipo de enmascaramiento de campo de texto o aún tengo que interceptar onkeydown etc.?

jbabey tiene razón: "enmascarar" como en bloquear ciertos caracteres ilegales, sin ocultar lo que está escrito.

La mejor manera (como en la forma más simple y confiable) que he encontrado es atrapar onkeyup y luego simplemente ejecutar una expresión regular para reemplazar el valor del campo de texto, eliminando cualquier carácter ilegal.

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 todos o las teclas de flecha.

Pero su principal desventaja es que muestra el (los) personaje (s) escrito (s) brevemente (s) antes de eliminarlos, lo que hace que se vea muy hackeado y poco profesional.

Answer 1

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

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

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

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

5. mín y máx : <input type="number" min="1" max="4" />

Answer 2

Busque los nuevos tipos de entrada HTML5 . Estos instruyen a los navegadores a realizar el filtrado de datos del lado del cliente, pero la implementación está incompleta en diferentes navegadores. El atributo de pattern hará un filtro de estilo de expresión regular, pero, una vez más, los navegadores no lo admiten en su totalidad (o no lo admiten).

Sin embargo, estos no bloquearán la entrada en sí, simplemente evitará que se envíe el formulario con los datos no válidos. Aún deberá atrapar el evento onkeydown para bloquear la entrada clave antes de que aparezca en la pantalla.

Answer 3

Sí, de acuerdo con los borradores de HTML5, puede utilizar el atributo de pattern para especificar la entrada permitida usando una expresión regular. Para algunos tipos de datos, puede usar campos de entrada especiales como <input type=email> . Pero estas características aún carecen de soporte o tienen un soporte cualitativamente deficiente.

Answer 4

Un poco tarde, pero un complemento útil que usará una máscara para dar un poco más de restricción a 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="[phone]"placeholder>
    <span class="help-block">[phone]</span>
  </div>
</div>

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

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