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 | @nmuller99 Programação
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 target="_blank">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:

Mais sobre:
Share Tweet
Recomendado
Comentários
Destaquesver tudo