JS para Campo de texto que valide Horas

pabloe9k · #1 (**permalink**) 28/08/2009, 14:03

Necesito hacer algo, pero no se bien como explicarlo.

He visto (y espero que ustedes también) navegando por la web, que existe alguna forma de hacer una casilla de texto (<input type="text">, supongo) que valida uno a uno los caracteres ingresados, a medida que los vas escribiendo.

Esto resúlta muy útil en casillas para ingresar una horario, ya que obliga al usuario a colocar, por ejemplo, dos caracteres para la hora, el símbolo ":" y dos caracteres más para los minutos. Y el cursor va saltando al campo de al lado para escribir. Es realmente una función muy útil.

Visualmente se ve así:

No me acuerdo donde lo ví, como para copiarme el código, sólo atiné a hacer un print de pantalla.

Alguien sabe como se hace??
Se entiende lo que busco??

Espero que puedan ayudarme.
Como siempre, muchas gracias, gente.

Saludos.

Adler · #2 (**permalink**) 29/08/2009, 06:12

Hola

Podría usar mascaras de entrada

Suerte

pabloe9k · #3 (**permalink**) 29/08/2009, 06:30

Cita:

Iniciado por Adler

Hola

Podría usar mascaras de entrada

Suerte

Dado que mi conocimiento es muy básico, podrías decirme que es una 'máscara de entrada' y pasarme el código para que quede como yo busco?

Muchas gracias.

Adler · #4 (**permalink**) 29/08/2009, 06:54

Hola

Prueba con esto

Código javascript:

Ver original<html>
</head>
<script type="text/javascript">
var patron = new Array(2,2)
function Validar(elem,separador,pat,numerico) {
    if(elem.valoranterior != elem.value) { 
valor = elem.value;
largo = valor.length;
valor = valor.split(separador);
valor2 = "";
 
    for(i=0; i<valor.length; i++) {
        valor2 += valor[i]; 
    }
 
    if(numerico){
        for(j=0; j<valor2.length; j++){
            if(isNaN(valor2.charAt(j))){
                letra = new RegExp(valor2.charAt(j),"g");
                valor2 = valor2.replace(letra,"");
            }
        }
    }
 
valor = "";
valor3 = new Array();
    for(n=0; n<pat.length; n++) {
        valor3[n] = valor2.substring(0,pat[n]);
        valor2 = valor2.substr(pat[n]);
    }
 
for(q=0; q<valor3.length; q++) {
            if(q == 0) {
                if (valor3[0] > 24) {
                        valor = "";
                 }else{
                        valor = valor3[q];
                }
 
            }else{
                    if(valor3[q] != "") {
            if ((valor3[0] == 24) && (valor3[1] > 0)) {
                valor = "00";
            } else if (valor3[1] > 59) {
                valor = valor3[0];
            }else{
                valor += separador + valor3[q];
            }
                 }
            }
}
 
    elem.value = valor;
    elem.valoranterior = valor;
    }
}
</script>
</head>
<body>
<form>
<h1>Valida una fecha yyyy-mm-dd</h1>
<input type="text" name="fecha" id= "fecha" onkeyup="Validar(this,':',patron,true)" maxlength="5" />
</form>
</body>
</html>

Suerte

pabloe9k · #5 (**permalink**) 29/08/2009, 08:41

Sencillamente, espectacular!!
Vos sí que la tenés clara!!
Todo mi karma para vos!!!
Jajaja.
Saludos y gracias.

pabloe9k · #6 (**permalink**) 29/08/2009, 11:16

Cita:

Iniciado por Adler

Hola

Podría usar mascaras de entrada

Suerte

El código para la hora funcionó de maravilla.
Podrás pasarme algo para validar que se ingresen sólo dos números?
Quiero ingresar una cantidad que puede ir de 1 a 99,9. (sólo un decimal).

Se que es un abuso esto, pero prometo no molestarte más.
Gracias nuevamente, amigo.

Adler · #7 (**permalink**) 31/08/2009, 05:21

Hola

Cita:

Iniciado por pabloe9k

El código para la hora funcionó de maravilla.
Podrás pasarme algo para validar que se ingresen sólo dos números?
Quiero ingresar una cantidad que puede ir de 1 a 99,9. (sólo un decimal).

Se que es un abuso esto, pero prometo no molestarte más.
Gracias nuevamente, amigo.

Lo que pretendes no se hacerlo, de hecho no creo que se pueda hacer. Pongamos por ejemplo que el usuario introduce los dígitos 123 ¿Qué número quiso introducir, 1,23 o 12,3?

Suerte

pabloe9k · #8 (**permalink**) 31/08/2009, 06:50

Cita:

Iniciado por Adler

Hola

Lo que pretendes no se hacerlo, de hecho no creo que se pueda hacer. Pongamos por ejemplo que el usuario introduce los dígitos 123 ¿Qué número quiso introducir, 1,23 o 12,3?

Suerte

No te preocupes, de por sí me has ayudado muchísimo.
Gracias, Adler.

Saludos.

Javier01 · #9 (**permalink**) 31/08/2009, 09:22

Buenas tardes! tal vez este codigo te siva!

Código codigo:

Ver original<html>
</head>
<script type="text/javascript">
 
function isNumberKey(evt,elem) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if (charCode > 31 && (charCode < 44 || charCode > 57 || charCode==45 || charCode==46 || charCode==47)){
        return false;
    }
    else{
        var valor=elem.value;
        var tamanio=elem.value.length
        if (elem.value > 99){
            elem.value=99 + ',9';
            return false;
        }
        if(charCode == 44){
            if(valor.indexOf(',') < 0){
                if (tamanio > 0 && tamanio < 3){
                 return true;
                }
                else {
                    return false;
                }
            }
            else{
                return false;
            }
        }
    }
}
 
</script>
</head>
<body>
<form>
<h1>Valida del 1 al 99,9</h1>
<input type="text" name="numero" id= "numero" onKeypress="return isNumberKey(event,this)" maxlength="4" />
</form>
</body>
</html>

No esta para nada "pulido", pero capas te sirve de algo.

suerte y saludos

pabloe9k · #10 (**permalink**) 31/08/2009, 09:36

Cita:

Iniciado por Javier01

Buenas tardes! tal vez este codigo te siva!

Código codigo:

Ver original<html>
</head>
<script type="text/javascript">
 
function isNumberKey(evt,elem) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if (charCode > 31 && (charCode < 44 || charCode > 57 || charCode==45 || charCode==46 || charCode==47)){
        return false;
    }
    else{
        var valor=elem.value;
        var tamanio=elem.value.length
        if (elem.value > 99){
            elem.value=99 + ',9';
            return false;
        }
        if(charCode == 44){
            if(valor.indexOf(',') < 0){
                if (tamanio > 0 && tamanio < 3){
                 return true;
                }
                else {
                    return false;
                }
            }
            else{
                return false;
            }
        }
    }
}
 
</script>
</head>
<body>
<form>
<h1>Valida del 1 al 99,9</h1>
<input type="text" name="numero" id= "numero" onKeypress="return isNumberKey(event,this)" maxlength="4" />
</form>
</body>
</html>

No esta para nada "pulido", pero capas te sirve de algo.

suerte y saludos

Te agradezco mucho pero no está funcionando este código.
Si escribo el valor 222, al tabular (cambié el llamado a la función por 'onBlur') me modifica el valor a 99,9, no a 22,2.
Lamentablemente no tengo el conocimiento de Java como para modificar el código.
Gracias de todos modos.

Saludos.

Javier01 · #11 (**permalink**) 31/08/2009, 10:11

Cita:

Iniciado por pabloe9k

Te agradezco mucho pero no está funcionando este código.
Si escribo el valor 222, al tabular (cambié el llamado a la función por 'onBlur') me modifica el valor a 99,9, no a 22,2.
Lamentablemente no tengo el conocimiento de Java como para modificar el código.
Gracias de todos modos.

Saludos.

tienes razon, pero solo lo puse porque suponiendo que ponia un numero mayor a 100, lo reseteaba al mas sercano (osea 99,9).
Pero si quieres que si al poner un numero mayor, ponga el mas parecido (si pone 754 cambie a 75,4)
prueba con esta modificacion:

Código javascript:

Ver original<html>
</head>
<script type="text/javascript">
 
function isNumberKey(evt,elem) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if (charCode > 31 && (charCode < 44 || charCode > 57 || charCode==45 || charCode==46 || charCode==47)){
        return false;
    }
    else{
        var valor=elem.value;
        var tamanio=elem.value.length
        if(charCode == 44){
            if(valor.indexOf(',') < 0){
                if (tamanio > 0 && tamanio < 3){
                 return true;
                }
                else {
                    return false;
                }
            }
            else{
                return false;
            }
        }
    }
}
 
function mayor(elem){
    if (elem.value > 99){
        if (elem.value.length >3){
            elem.value= elem.value.substr(0,3)
        }
        var valor=elem.value;
        valor = elem.value.substr(0,2) + ',' + elem.value.substr(2,3);
        elem.value=valor;
    }
}
 
</script>
</head>
<body>
<form>
<h1>Valida del 1 al 99,9</h1>
<input type="text" onpaste="return false" name="numero" id= "numero" onkeyup="mayor(this)" onKeypress="return isNumberKey(event,this)" maxlength="4" />
</form>
</body>
</html>

pabloe9k · #12 (**permalink**) 01/09/2009, 08:04

Cita:

Iniciado por Javier01

tienes razon, pero solo lo puse porque suponiendo que ponia un numero mayor a 100, lo reseteaba al mas sercano (osea 99,9).
Pero si quieres que si al poner un numero mayor, ponga el mas parecido (si pone 754 cambie a 75,4)
prueba con esta modificacion:

Código javascript:

Ver original<html>
</head>
<script type="text/javascript">
 
function isNumberKey(evt,elem) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if (charCode > 31 && (charCode < 44 || charCode > 57 || charCode==45 || charCode==46 || charCode==47)){
        return false;
    }
    else{
        var valor=elem.value;
        var tamanio=elem.value.length
        if(charCode == 44){
            if(valor.indexOf(',') < 0){
                if (tamanio > 0 && tamanio < 3){
                 return true;
                }
                else {
                    return false;
                }
            }
            else{
                return false;
            }
        }
    }
}
 
function mayor(elem){
    if (elem.value > 99){
        if (elem.value.length >3){
            elem.value= elem.value.substr(0,3)
        }
        var valor=elem.value;
        valor = elem.value.substr(0,2) + ',' + elem.value.substr(2,3);
        elem.value=valor;
    }
}
 
</script>
</head>
<body>
<form>
<h1>Valida del 1 al 99,9</h1>
<input type="text" onpaste="return false" name="numero" id= "numero" onkeyup="mayor(this)" onKeypress="return isNumberKey(event,this)" maxlength="4" />
</form>
</body>
</html>

Esaaaaa!!
Realmente espectacular, mi amigo!!!

La verdad que la gente del foro tiene un conocimiento increíble.
Muchas gracias, nuevamente.
Saludos y gracias nuevamente.

Mi karma para vos.