Sempre estamos fazendo formulários e nesses formulários precisamos inserir campos como data, data e hora, telefone, cpf, entre outros.
O problema é que não podemos colocar somente o campo lá e aceitar que o usuário digite de qualquer jeito. Para isso podemos usar o Javascript ou JQuery para guiar os usuário a preencherem como desejamos ou como o dono do software deseja que seja inserido os dados.
A forma de fazer isso mais fácil é com JQuery sem dúvidas, clique aqui. Mas como nem sempre estamos em um projeto que tem JQuery e também não podemos inserir podemos usar também o Javascript para fazer a mesma coisa de um jeito um pouco mais difícil, explicação abaixo.
Abaixo segue forma de validar cada tecla pressionada no teclado e apenas permitir as que convém para o campo em questão DATA (somente números) os demais dígitos o javascript coloca. Para baixar o arquivo, clique aqui.
<html>
<head>
<title>Mascara de datas</title>
<script
language="JavaScript" type="text/javascript">
//valida
tamanho, tipo caracteres e formata
//
campo quando foco sair do campo (onBlur)
function
validaDadosOnBlur(tipo, obj, evento)
{
//aqui podem ser inseridos outras validações (cpf,
telefone, outros)
if (tipo ==
'datahora')
{
//pega somente os valores numéricos do campo
var
campo = obj.value.replace(/\D+/g, '');
//valida se tem até 14 caracteres relativos
//à máscara 00/00/0000 00:00:00
if(campo
>= 14){
campo
= campo.substring(0,14);
}
obj.value
= campo;
//formata campo com a máscara passada
formataCampo(obj,
'00/00/0000 00:00:00', evento);
}
return
true;
}
//valida tamanho, tipo caracteres e formata campo
//quando
uma tecla é pressionada (onKeyPress)
function
validaDados( tipo, obj, evento )
{
//pega a tecla que foi pressionada,
//funciona em todos os navegadores (browsers)
var
nTecla = 0;
if
(document.all) {
nTecla
= evento.keyCode;
}
else {
nTecla
= evento.which;
}
//se as teclas direcionais ou backspace (apagar)
// sai do método sem executar o restante do método
if(nTecla == 0 || nTecla == 8){
return true;
}
//aqui podem ser inseridos outras validações
//(cpf, telefone, outros)
switch
( tipo ) {
case "datahora":
{
//valida se
apenas teclas numéricas foram inseridas
if ( (nTecla >= 48 && nTecla <=
57)){
var
campo = obj.value.replace(/\D+/g, '');
//valida se tem até 14 caracteres relativos
//à máscara 00/00/0000 00:00:00
if(campo.length >= 14){
obj.value
= obj.value.substring(0,19);
return
false;
}
//poe o campo em um objeto de escopo global
campoParaFormatar
= obj;
//seta para executar o método formataCampo 10 milésimos
// de segundo após acabar a execução
//do método atual (validaDados)
//pois somente após esse método retornar true o valor
// preenchido pelo usuário será inserido no campo
//e a formatação deve ocorrer após o valor já estar no
//campo
tempo =
setTimeout("formataCampo(campoParaFormatar, '00/00/0000
00:00:00')",10);
return true;
}
return false;
break;
}
}
}
//método usado para formatar qualquer campo com a devida
Mascara desejada
function
formataCampo(campo, Mascara) {
if(campo.value
== undefined){
return
false;
}
var
boleanoMascara;
var
posicaoCursor = campo.selectionStart;
var
itensInseridos = 0;
var
tamanhoPreenchido = campo.value.length;
var
posicaoCampo = 0;
var
NovoValorCampo="";
exp
= /\-|\.|\/|\(|\)|\:| /g;
campoSoNumeros
= campo.value.toString().replace( exp, "" );
var
TamanhoMascara = campoSoNumeros.length;
for(i=0;
i<= TamanhoMascara; i++) {
boleanoMascara = ((Mascara.charAt(i) == "-") || (Mascara.charAt(i)
== "."));
boleanoMascara = boleanoMascara || ((Mascara.charAt(i) == "/") || (Mascara.charAt(i) == ":"));
boleanoMascara = boleanoMascara || ((Mascara.charAt(i) == "/") || (Mascara.charAt(i) == ":"));
boleanoMascara = boleanoMascara || ((Mascara.charAt(i) ==
"(") || (Mascara.charAt(i) == ")"));
boleanoMascara = boleanoMascara || (Mascara.charAt(i) == " ");
boleanoMascara = boleanoMascara || (Mascara.charAt(i) == " ");
if
(boleanoMascara) {
if(campo.value.charAt(i-itensInseridos)
!= Mascara.charAt(i)){
if( i <= posicaoCursor+itensInseridos){
if( i <= posicaoCursor+itensInseridos){
itensInseridos++;
}
}
}
}
}
for(i=0;
i<= TamanhoMascara; i++) {
boleanoMascara = ((Mascara.charAt(i) == "-") || (Mascara.charAt(i)
== "."));
boleanoMascara = boleanoMascara || ((Mascara.charAt(i) == "/") || (Mascara.charAt(i) == ":"));
boleanoMascara = boleanoMascara || ((Mascara.charAt(i) == "/") || (Mascara.charAt(i) == ":"));
boleanoMascara = boleanoMascara || ((Mascara.charAt(i) ==
"(") || (Mascara.charAt(i) == ")"));
boleanoMascara = boleanoMascara || (Mascara.charAt(i) == " ");
boleanoMascara = boleanoMascara || (Mascara.charAt(i) == " ");
if
(boleanoMascara) {
NovoValorCampo
+= Mascara.charAt(i);
TamanhoMascara++;
if(tamanhoPreenchido <= posicaoCursor){
itensInseridos++;
}
}else
{
NovoValorCampo
+= campoSoNumeros.charAt(posicaoCampo);
posicaoCampo++;
}
}
campo.value
= NovoValorCampo;
campo.selectionStart
= posicaoCursor + itensInseridos;
campo.selectionEnd = posicaoCursor +
itensInseridos;
return true;
}
</script>
</head>
<body>
<form>
<!--campo html de data com
duas chamadas javascript “onKeyPress” que irá
//chamar a função validaDados e “onBlur”
que irá chamar validaDadosOnBlur-->
<input id="dataInicio"
name="dataInicio" type="text" style="width:
200px" value=""
onkeypress="return validaDados(
'datahora', this, event );" onBlur="validaDadosOnBlur('datahora',
this, event);">
Ex:
dd/mm/aaaa hh:mm:ss
</form>
</body>
</html>
Nenhum comentário:
Postar um comentário