¿Cómo hacer que el campo de entrada escriba tanto numérico como contraseña?

Question

Soy consciente de esto:

<input type="tel"> 

y estoy consciente de ello:

<input type="password"> 

pero me gustaría utilizar ambos. Quiero que el teclado numérico aparezca en iOS (específicamente) pero oculte cada carácter una vez que se haya tipeado. Es algo como esto posible?

<input type="tel|password"> 

Answer 1

Puede hacer que el tipo de entrada de contraseña y luego usar javascript para validar que sólo los números se han introducido cuando el botón de enviar se ha pulsado. http://www.configure-all.com/javascript_form_validation.php

Answer 2

HTML del cuadro de entrada:

<input type="tel" name="password" id="password" value="" placeholder="Enter password" 
    onfocus="changeToPassword()"> 

Javascript:

// change the type of the input to password 
function changeToPassword() { 
    setTimeout(function() { 
     document.getElementById("password").setAttribute("type", "password") 
    }, 500); 
} 

esta solución funciona en el iPhone. Esto es como un truco. Una vez que tenga el teclado numérico en los próximos 500 milisegundos, cambie el atributo a contraseña y eso engaña al teléfono.

Answer 3

Para iOS se puede ajustar la entrada a escribir "contraseña" y todavía disparar el numérico teclado utilizando el HTML 5-Atributo "patrón":

<input type="password" pattern="[0-9]*" ... /> 

Desde el Apple-Documentation:

Para mostrar un teclado numérico, establecer el valor del atributo de patrón en "[0-9] " o "\ d".