Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » convertir script a una funcion para llamarla luego onkeypress

JavaScript - convertir script a una funcion para llamarla luego onkeypress

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de Eduardo
Val: 159
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

convertir script a una funcion para llamarla luego onkeypress

Publicado por Eduardo (186 intervenciones) el 03/02/2021 18:50:58
Hola a todos tengo el siguiente código el cual hace que el campo al ir escribiendo una hora salga los : puntos automáticamente pero el script esta ligado al campo.. como hago para convertir el script en una función para llamar dicha función desde el campo al ir escribiendo tipo <input type="text" onkeypress="myFunction()">

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<input name="hora1" type="text" required="required" id="hora1" maxlength="5" style="font-size:20px;" autocomplete="off" size="8" autofocus="autofocus"/>
 <script>
document.getElementById("hora1").addEventListener("keypress", function(e) {if (this.value.length<5 && /[0-9]/.test(e.key)) {
        this.value+=e.key.toUpperCase();
    }
    if (this.value.length>=5 && /[0-9]/.test(e.key)) {
        return;
    }
    if (this.value.length==2) {
        this.value+=":";
    }
    e.preventDefault();
});
</script>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de joel
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

convertir script a una funcion para llamarla luego onkeypress

Publicado por joel (895 intervenciones) el 04/02/2021 07:45:48
Hola Eduardo, seria algo así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<input onkeypress="validarHora(event)" name="hora1" type="text" required="required" id="hora1" maxlength="5" style="font-size:20px;" autocomplete="off" size="8" autofocus="autofocus"/>
 
<script>
function validarHora(e) {
    e.preventDefault();
    if (e.target.value.length>=5) {
        return;
    }
    if (e.target.value.length<5 && /[0-9]/.test(e.key)) {
        e.target.value+=e.key;
    }
    if (e.target.value.length==2) {
        e.target.value+=":";
    }
};
</script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Eduardo
Val: 159
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

convertir script a una funcion para llamarla luego onkeypress

Publicado por Eduardo (186 intervenciones) el 04/02/2021 14:47:50
Excelente muchas Gracias.. Eres el mejor!!!!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Eduardo
Val: 159
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

convertir script a una funcion para llamarla luego onkeypress

Publicado por Eduardo (186 intervenciones) el 04/02/2021 15:07:36
Hola Joel mil gracias por enseñarme e ilustrarme a hacer cosas fascinantes y funcionales en JS otra consulta con respecto al mismo script

he puesto adicional para que sea hora1 y hora 2 respectivamente como hago para validar que hora1 no sea mayor que hora2 salga un alert que indique que la fecha inicial no puede ser mayor a la fecha final...


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<input onkeypress="validarHora(event)" name="hora1" type="text" required="required" id="hora1" maxlength="5" style="font-size:20px;" autocomplete="off" size="8" autofocus="autofocus"/>
 a
 <input onkeypress="validarHora(event)" name="hora2" type="text" required="required" id="hora2" maxlength="5" style="font-size:20px;" autocomplete="off" size="8" autofocus="autofocus"/>
 <script>
function validarHora(e) {
    e.preventDefault();
    if (e.target.value.length>=5) {
        return;
    }
    if (e.target.value.length<5 && /[0-9]/.test(e.key)) {
        e.target.value+=e.key;
    }
    if (e.target.value.length==2) {
        e.target.value+=":";
    }
};
 </script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Eduardo
Val: 159
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

convertir script a una funcion para llamarla luego onkeypress

Publicado por Eduardo (186 intervenciones) el 04/02/2021 20:45:32
Hola Joel.. mil gracias lo que sucede es que me toca implementarlo que llame a la función con el onkeypress tal cual así como lo pasaste me funciona perfecto, solo que debo ahora poner esa alerta que salte cuando la hora 1 sea mayor a la hora 2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<input onkeypress="validarHora(event)" name="hora1" type="text" required="required" id="hora1" maxlength="5" style="font-size:20px;" autocomplete="off" size="8" autofocus="autofocus"/>
 a
 <input onkeypress="validarHora(event)" name="hora2" type="text" required="required" id="hora2" maxlength="5" style="font-size:20px;" autocomplete="off" size="8" autofocus="autofocus"/>
 <script>
function validarHora(e) {
    e.preventDefault();
    if (e.target.value.length>=5) {
        return;
    }
    if (e.target.value.length<5 && /[0-9]/.test(e.key)) {
        e.target.value+=e.key;
    }
    if (e.target.value.length==2) {
        e.target.value+=":";
    }
};
 </script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de joel
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

convertir script a una funcion para llamarla luego onkeypress

Publicado por joel (895 intervenciones) el 05/02/2021 08:24:38
Solo tienes que implementar la función que te mostré en el enlace... haber si te sirve:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<input onkeypress="check(event)" name="hora1" type="text" required="required" id="hora1" maxlength="5" style="font-size:20px;" autocomplete="off" size="8" autofocus="autofocus"/>
 a
<input onkeypress="check(event)" name="hora2" type="text" required="required" id="hora2" maxlength="5" style="font-size:20px;" autocomplete="off" size="8" autofocus="autofocus"/>
 
<script>
function check(e) {
    validarHora(e);
    const hora1=document.getElementById("hora1").value;
    const hora2=document.getElementById("hora2").value;
    if (hora1.length==5 && hora2.length==5) {
        if (devolverMinutos(hora1)>devolverMinutos(hora2)) {
            alert("Hora inicial es superior a hora2");
        }
    }
}
function validarHora(e) {
    e.preventDefault();
    if (e.target.value.length>=5) {
        return;
    }
    if (e.target.value.length<5 && /[0-9]/.test(e.key)) {
        e.target.value+=e.key;
    }
    if (e.target.value.length==2) {
        e.target.value+=":";
    }
};
function devolverMinutos(horaMinutos) {
    return (parseInt(horaMinutos.split(":")[0])*60)+parseInt(horaMinutos.split(":")[1]);
}
</script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar