2009-03-18 27 views
6

¿Alguien me puede mostrar algún ejemplo para restringir la entrada del usuario (en la etiqueta de entrada) en Javascript?restringir la entrada del usuario usando javascript

Algo que cuando fijamos la entrada (type = "text") para aceptar sólo numérica, por lo que ignorará cualquier otra entrada numérica a excepción de ...

Creo que es útil para la entrada de números (como postal, tarjeta de crédito, el dinero, el valor, la puntuación, fecha etc ...), y si se puede por favor, muéstrame cómo crear de entrada con el patrón, algo así como:

 
Please Input Date: 
|-----------------| 
| / / | 
|-----------------| 

PS: oí formularios Web 2.0 apoyará esto en el futuro ... (¿Un navegador compatible con Acid 3?)

input type = "fecha"
tipo entrada = "tiempo"
input type = "número"
input type = "dinero"

Pero fue sólo noticias de futuro: D

Respuesta

8

Esto podría ayudarlo.

http://www.w3schools.com/jsref/event_onkeydown.asp

<html> 
<body> 

<script type="text/javascript"> 
function noNumbers(e) 
{ 
var keynum; 
var keychar; 
var numcheck; 

if(window.event) // IE 
{ 
keynum = e.keyCode; 
} 
else if(e.which) // Netscape/Firefox/Opera 
{ 
keynum = e.which; 
} 
keychar = String.fromCharCode(keynum); 
numcheck = /\d/; 
return !numcheck.test(keychar); 
} 
</script> 

<form> 
<input type="text" onkeydown="return noNumbers(event)" /> 
</form> 

</body> 
</html> 
+0

Sí, eso funciona para el filtrado de caracteres simples ... pero ¿qué pasa con los formatos completos como una fecha ("mm/dd/aa"). No puede simplemente devolver falso si no tiene el formato adecuado o de lo contrario nunca podrá ingresar los primeros dígitos. –

+1

No, eso es cierto, pero da una cierta idea de cómo se podría hacer. Fx. solo podría escribir 0 y 1 en el primer carácter de la cadena de fecha. Si el usuario escribe un número encima, el número no se registrará. Pero sí, estos códigos específicos no hacen toda la magia. –

+0

sí, acabo de comentar por claridad;) –

3

Puedes usar libs específicas como jQuery Validate (o lo que sea que ofrezca tu framework JS) en el envío de formularios. La otra solución es controlar el valor en keyUp & desenfocar eventos, pero puede ser bastante complicado decidir qué hacer con la entrada mal formateada (especialmente cuando el formato es un poco complejo, es decir, no solo caracteres no deseados). Entonces, en general, recomendaría el control del lado del cliente en el envío.

+0

ya tengo el formulario de enviar el método de validación: D – Dels

5

Esta pregunta ya ha aceptado una respuesta, pero creo que hay una mejor solución a esto. No tiene que implementarlo usted mismo en Keydown, etc., hay bibliotecas para eso. Ellos llaman a la técnica que describes "máscaras de entrada". Consulte this jQuery plugin y hace exactamente lo que quiere.

+1

Este plugin de jQuery es increíble. – Matthew

+0

Me encanta ese complemento pero el problema persiste con varios dispositivos Android tanto en navegadores nativos como en Chrome donde hay demasiados problemas. En su mayor parte, cuando se trata de Androids, normalmente termino quitando la máscara por completo. –

Cuestiones relacionadas