Mascará para campo hora

Hoje vou mostrar como se faz uma mascará no campo de hora em javascript. Muito utilizada para criação de horários de expediente.

Por Programação 2 comentários
Ol? pessoal.
Hoje vou mostrar como se faz uma mascar? no campo de hora em javascript. Muito utilizada para cria??o de hor?rios de expediente.

Bom primeiro vou demonstrar como funciona o script que ira ser adicionado no campo do formul?rio:


Este campo tem o nome sendo "hora", tem a capacidade de receber at? 8 caracteres. Ao ser pressionada a tecla, o campo chama a fun??o javascript valida_horas passando por par?metro o campo completo (this) e o evento que ocorreu, no caso: precionada alguma tecla.
E ao completar o preenchimento o campo chama uma fun??o que ir? verficar se a hora ? v?lida, se n?o for ela vai remover os dados do campo.

Bom vamos agora as fun?es:

function valida_horas(edit, ev)
{
li = new Array(':');
liE = new Array(58);

somenteNumero(edit,ev,li,liE);

if(edit.value.length == 2 || edit.value.length == 5)
edit.value += ":";
}

Esta fun??o permite que o usu?rio escreva somente n?meros e o caractere dois pontos(:).
A fun??o chamar? um outra fun??o chamada somenteNumero que faz este controle, esta fun??o foi explicada em outra ocasi?o e est? no c?digo juntamente. Mas seguindo, ent?o ao preencher dois caracteres a fun??o adiciona um : no final do valor, e o mesmo acontece quando 5 caracteres estiverem preenchidos.

function verifica_horas(obj)
{
if(obj.value.length < 8)
obj.value = '';
else
{
hr = parseInt(obj.value.substring(0,2));
mi = parseInt(obj.value.substring(3,5));
se = parseInt(obj.value.substring(6,8));
if((hr < 0 || hr > 23) || (mi < 0 || mi > 60) || (se < 0 || se > 60 ))
{
obj.value = '';
alert('Hora inv?lida');
}
}
}

Esta fun??o ? respons?vel por verificar se a hora preenchida ? valida, assim se n?o for, ela mostra uma mensagem e apaga o valor do campo.


C?digo funcionando e testado em IE6 - Firefox 2.0.0.6
O c?digo completo pode ser baixado abaixo:

Compartilhe com seus amigos:
Nicolas Muller
Nicolas Muller Fundador do Oficina da Net, trabalha com internet desde 2004. Entusiasta de tecnologia, hoje coordena a redação do site, responsável pela análises de smartphones. Foi programador por 10 anos e agora jornalista por profissão.
FACEBOOK // INSTAGRAM: @nmuller99 // TWITTER: @nmuller99
Quer conversar com o(a) Nicolas, comente:
Carregar comentários
Quantos celulares a Motorola tem em linha?
5(14,86%)
10(56,19%)
15(11,76%)
20(9,29%)
26(7,89%)