Poner : en un campo de texto para no tener que escribirlos siempre

[lcrecarey]

Hola forer@s!
Mi problema es que quiero poner : en un campo de texto en el que se debe introducir una hora de la forma 17:30, para que el usuario no tenga que escribirlos cada vez que rellena el campo.
Me refiero a que los : estean en el centro del campo de texto, y que no se puedan borrar. Y que se puedan escribir 2 caracteres antes y 2 despues.
Agradecería cualquier aportacion.
Un saludo.

[monoswim]

para cargar la hora fijate en el FAQ de javascript...

Para que no lo modifiquen usa en el input readonly="readonly"

o readonly="yes"

Saludos

[lcrecarey]

Pero es que mi idea era que el usuario escribiera la hora, y que los 2 puntos fueran los que no se podían modificar.
Ej: Para introducir la hora 17:30, que el usuario solo tenga que teclear 1730
Y si pongo todo el campo readonly, el usuario no puede introducir la hora.
Yo creo que hacer se puede hacer, porque a mi me suena de verlos en algún sitio,aunque no recuerdo donde.
Espero que alguien sepa decirme que debo hacer.
Un saludo

[programeitor]

function mira(esto){
var e=esto.value
var l=e.length
if(l==3){e=(e.substring(0,2)+":"+e.charAt(2))}
if(l>4)e=e.substring(0,5)
esto.value=e
}
<input name="hora" type="text" value="" size="4" onkeyup="mira(this)" />
Resulta que esta funcion tiene un fallo, que no se como solucionar., y es que, al borrar, con la tecla retroceso., cuando llega a ":" no sigue borrando a menos que se deje la tecla pulsada.

Espero que te sirva ,y que alguien de con el fallo.

Saludos.

[Mickel]

No seria mejor que uses dos selectores?

Algo asi...
<select name='hora'>
<option value='0'>00</option>
...
<option value='23'>23</option>
</select>:<select name='minuto'>
<option value='0'>00</option>
...
<option value='59'>59</option>
</select>

[gaspampera]

Si usas Xsl y XML utiliza esto.

En la parte de pantalla:
<font face="verdana" size="1" color="#00008B">
<input type="text" name="txt_hora_desde" size="2" style="width:20; font-family: Arial; font-size: 8pt"/>
:
<input type="text" name="txt_minuto_desde" size="2" style="width:20; font-family: Arial; font-size: 8pt"/>
</font>

Luego en el momento de enviar los datos del formulario valida que la hora y los minutos son correctos en un javascript, que contendra lo siguiente
// Validar si hora_desde está comprendida entre las 00 y las 23
if (hora_desde&gt;=0 &amp;&amp; hora_desde&lt;=23)
{}
else
{alert("La hora desde debe estar comprendida entre 00 y 23 ");
ok="NO";
}

// Validar si minuto_desde está comprendida entre las 00 y las 59
if (minuto_desde&gt;=0 &amp;&amp; minuto_desde&lt;=59)
{}
else
{alert("Minutos desde debe estar comprendida entre 00 y 59 ");
ok="NO";
}

Por ultimo haz un if que si Ok="SI" entonces haces el submit y si no pues nada.

Espero que te sirva

[posavasos]

La opción que comenta Mickel es la que más me gusta, posiblemente sea la más usable.

[lcrecarey]

Gracias a todos por vuestra ayuda. Pero la solución que más se aproxima a lo que yo buscaba es la de programeitor.
Y además, solucioné el fallo que comentaba programeitor.
Por si alguien la necesita, ahí va:

Código HTML:

 <script>
function mira(esto)
 {
   var e=esto.value;
   var l=e.length;
   // Aquí lo que hago es añadir un 0 antes de las horas con un solo digito 
   // para que el usuario no tenga que escribirlo siempre. Y en mi caso la 
   // unica hora de 1 digito es la de las 9.
   if (l==1)
    {
       if (e==9)
        {
           e="0"+e.charAt(0);
        }
    }
   if(l==3)
    {
        // Aquí compruebo si la tecla pulsada es la de retroceso. Y así ya borra 
       // perfectamente
       if (event.keyCode == 8)
           e= (e.substring(0,2)+":");
       else
           e=(e.substring(0,2)+":"+e.charAt(2));
    }
   if(l>4)
     e=e.substring(0,5);
   esto.value=e;
}
</script> 

Un saludo

[KarlanKas]

Vámonos a JS!

[programeitor]

lcrecarey me alegro de que te sirviera el codigo ,y enhorabuena por la solucion. Perfecto.

[programeitor]

.

Hola ,de nuevo.

Mira ,para añadir compatibilidad entre navegadores cambia:

function mira(esto)
por
function mira(esto,evento) // que recoge la pulsacion enviada desde el input

tambien

if (event.keyCode == 8)
por
tecla=(window.event)?window.event.keyCode : evento.which; // que da el valor
if (tecla == 8) // de la tecla pulsada segun el navegador.

y en el input

onkeyup="mira(esto)"
por
onkeyup="mira(esto,event)" <!-- que envia la pulsacion a la funcion -->

Saludos y buena suerte.

.