Hora Inicio: <input name="hora1" type="text" maxlength="5" class="hora">
Hora Final: <input name="hora2" type="text" maxlength="5" class="hora">
<script>
document.querySelectorAll(".hora").forEach(el => el.addEventListener("keypress", setHora));
function setHora(e) {
e.preventDefault();
if (this.value.length==2) {
this.value+=":";
}
// verificamos que el valor no supere los 5 caracteres,
// que sea un numero y que no supere las 24:59
if (this.value.length>=5 || /[0-9]/.test(e.key)==false ||
(this.value.length==0 && e.key>2) ||
(this.value.length==1 && e.key>3) ||
(this.value.length==3 && e.key>5)
) {
return;
}
this.value+=e.key;
}
</script>
Comentarios sobre la versión: Versión con evento addEventListener (4)