En un input - Obligar q entren los datos hh:mm

[derkenuke]

Me he dedicado a escribirle un validador "al vuelo" para formato HH:MM 24h y he mejorado algo el código.

Está muy comentado para que todo el que se tome las molestias lo entienda fácilmente. Me gustaría que todo el que pueda lo ponga a prueba y comente sus sugerencias para mejorarlo:

Código PHP:

  <input type="text" id="caja" />
 
<script>
 
var laCaja=document.getElementById("caja");
var valor="";
var mascaraDef="HH:MM";
 
 
// sustituirá la mascara en el campo por lo que se vaya escribiendo
function ponMascara(valueActual,mascaraTotal) {
    var mascara=mascaraTotal.substring( valueActual.length, mascaraTotal.length );
    laCaja.value=valueActual+mascara;
}
 
// devuelve true en caso de que el caracter sea válido en esa posición pos para un formato HH:MM 24h
function esValidoHHMM(c,pos) {
    if( pos==1 )                // primer caracter de las horas (entre 0 y 2)
        return /^[0-2]$/.test(c);
    else if( pos==2 )            // segundo caracter de las horas (depende del primero)
        return /^([0-1][0-9])|(2[0-3])$/.test(valor+c);
    else if( pos==3 || pos==4 )    // primer caracter de los minutos (entre 0 y 5)
        return /^[0-5]$/.test(c);
    else if( pos==5 )             // segundo caracter de los minutos (entre 0 y 9)
        return /^[0-9]$/.test(c);
    else                        // cualquier otro caso
        return false;
}
 
// el evento de pulsación de tecla para la caja laCaja
laCaja.onkeypress=function(e){
    var code;
    if (!e) var e = window.event;
    if (e.keyCode) code = e.keyCode;            // detectamos el codigo de la tecla
    else if (e.which) code = e.which;
    var caracter = String.fromCharCode(code);    // extraemos su caracter
    if (code==8) {        //controlamos el caracter backspace para borrar números de la caja
        // borramos un caracter de valor, y si hay un ":" borramos dos
        if(valor.length==3)        //hay colocado HH:
            valor=valor.substring(0,1);        //dejamos H
        else if(valor.length>0)    //si hay algo que borrar, lo borraremos
            valor=valor.substring(0,valor.length-1);
        ponMascara(valor,mascaraDef);
    }
    else if( esValidoHHMM(caracter, valor.length+1) ) {        // si es un número válido en el contexto, lo añadiremos
        if(valor.length==2)
            valor+=":";
        if(valor.length<mascaraDef.length)
            valor+=caracter;
        ponMascara(valor,mascaraDef);
    }
    else 
        alert("El carácter escrito en el campo no es válido");
    return false;        //nunca aceptaremos que el evento continúe, controlaremos el value siempre nosotros
}
 
ponMascara("",mascaraDef);
 
 
 
</script> 
  

Me ha acabado convenciendo mucho el script (salvo que se ve el cursor parpadear en la caja, y el individuo puede mosquearse un poco creyendo que va a escribir al final...).


Saludos.