Jump to content
klonder

Máscaras para TextField em JavaScript

Recommended Posts

Tentei incluir a máscara a seguir em um POST meu antigo, porém está fechado para novas respostas:

 

Todavia, para futuras consultas minhas e também para ajudar outras pessoas, venho deixar uma máscara interessante que acabei de terminar em JavaScript.

Ficou muito menor que a do POST acima:

<script type="text/javascript">
var iCount1;
var trava = false;

function MaskDown(e) {    
    if (trava == false) {
        iCount1 = e.value.length;
        trava = true;
    }
}

function MaskUp(e,mascara) {
    if (trava) {
        var textoLimpo = e.value.substr(0,iCount1+1).replace(/[\/\:\-\.]/g,"");
        var texto = "";
        
        var iM = 0;
        var iT = 0;
        while (iM < mascara.length) {
            if (iT < textoLimpo.length) {                
                if (mascara.substr(iM,1) == "#") {
                   texto += textoLimpo.substr(iT,1);
                   iT++;
                } else {
                    texto += mascara.substr(iM,1);
                }            
            }
        iM++;           
        }
    e.value = texto;
    trava = false;
    }    
}
</script>

Para funcionar, basta incluir em suas tags input os eventos, como demonstrado a seguir:

<input type="text" id="tfData" onkeydown="MaskDown(this)" onkeyup="MaskUp(this,'##/##/####')" placeholder="dd/mm/aaaa" style="width:80px" />
<br /><input type="text" id="tfHora" onkeydown="MaskDown(this)" onkeyup="MaskUp(this,'##:##')" placeholder="hh:mm"  style="width:50px"/>
    

À medida que o usuário vai digitando, o valor campo vai sendo formatado. Pode ser usado para CPF, CEP, RG, dentre outros...

 

Divirtam-se!

  • +1 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Wanderson Moreira
      Boa tarde
      Alguém poderia me ajudar com uma situação?
       
      Estou tentado comparar datas para me retornar 3 situações: Vencendo, Vencido, e Ativo
      porem acredito que o formato delas estejam erradas, pois ao compará-las o valor retorna errado
       
      $data = date_create("30-07-2020"); $vencimento = date_format($data, "d-m-Y"); $dataHoje = date("d-m-Y"); $dataVencer = date('d-m-Y', strtotime('+15 days')); if($vencimento > $dataVencer){echo 'Ativo';}  
      no exemplo estou comparando se 30-07-2020 for maior > 07-08-2020 exibir o texto "Ativo"
      Porem 30-07-2020 não é maior do que 07-08-2020 e mesmo assim o valor retornado esta sendo "ativo"
       
       
       

       
       
    • By Alberto Nascimento
      Como faço para inserir data e horário no campo abaixo?
       
      <input name="horarioatual" id="horarioatual" style="width: 366px" type="text" />  
      Quando utilizava no PHP 5.3 funcionava com "echo", porém agora não esta mais quando estou utilizando o PHP 5.6
       
      <?php echo "$date"; ?>  
    • By lucianfpaula
      Olá, saudações a todos, eu tenho a seguinte duvida: preciso identificar se a data do dia esta dentro de um intervalo de datas, nos temos o seguinte sql
      "SELECT * FROM tb_cadastro WHERE datCadastro BETWEEN '2010/09/10' AND '2011/10/10'".
      O que preciso é saber se a data do dia este nesse intervalo. Tipo
      Data 01 = 01/02/2020
      Data 02 = 10/02/2020
      Data 03 = 05/02/2020
      se Data 03 estiver no intervalo de Data 01 e Data 02 faça algo se não faça nada
    • By gersonab
      tenho um formulário de cadastro, onde em um campo input tem o cadastro de um cpf, este consigo fazer a validação com o método blur por uma vez, se eu insistir no cpf errado ele aceita, teria uma forma de bloquear o cadastro com o cpf errado ?
      <input type="text" name="cpfc" id="cpfc" class="form-control cpfcp" value="" placeholder="99999999999"> <script> function validarCPF(cpfc) { cpfc = cpfc.replace(/[^\d]+/g,''); if(cpfc == '') return true; // Elimina CPFs invalidos conhecidos if (cpfc.length != 11 || cpfc == "00000000000" || cpfc == "11111111111" || cpfc == "22222222222" || cpfc == "33333333333" || cpfc == "44444444444" || cpfc == "55555555555" || cpfc == "66666666666" || cpfc == "77777777777" || cpfc == "88888888888" || cpfc == "99999999999") return false; // Valida 1o digito add = 0; for (i=0; i < 9; i ++) add += parseInt(cpfc.charAt(i)) * (10 - i); rev = 11 - (add % 11); if (rev == 10 || rev == 11) rev = 0; if (rev != parseInt(cpfc.charAt(9))) return false; // Valida 2o digito add = 0; for (i = 0; i < 10; i ++) add += parseInt(cpfc.charAt(i)) * (11 - i); rev = 11 - (add % 11); if (rev == 10 || rev == 11) rev = 0; if (rev != parseInt(cpfc.charAt(10))) return false; return true; } var $input_cpfc = document.getElementById('cpfc'); $input_cpfc.addEventListener("blur", function() { if (!validarCPF($input_cpfc.value)) { alert('CPF Inválido!'); $input_cpfc = document.getElementById("cpfc").value=""; } }, false); </script> Desde já agradeço.
    • By robmig
      Olá amigos, sempre recorro a vocês AQUI dentro do fórum e sempre encontro boas referencias e dicas!
      Estou com um problema dentro do campo editar CPF.
       
      O que ocorre é:
       
      Quando acessado de dispositivos móveis, ao editar os números fica invisível a edição dos mesmos! o MAIS INTRIGANTE É QUE EM AGUNS CELULARES DÁ OUTROS NÃO DA!
      Já ao acessar o mesmo campo em Computadores a edição ocorre em perfeita ordem!
       
      O que pode ser?  EXISTE UMA EXPLICAÇÃO E CORREÇÃO?
       
      Segue algumas linhas do meu código:
       
      ===============MEU CÓDIGO ORIGINAL ===============
       
      <div class="form-group">
      <label class="col-md-2 control-label">CPF Titular</label>
      <div class="col-md-10">
      <input name="banco_cpf" maxlength="14" placeholder="000.000.000-00" id="cpf" value="<?php echo $dados_usuario[banco_cpf]; ?>" class="form-control" placeholder="CPF" required>
      </div>
      </div>
       
      ===============EDITADO COM UMA DICA: type="tel"===============
       
      <div class="form-group">
      <label class="col-md-2 control-label">CPF Titular</label>
      <div class="col-md-10">
      <input type="tel" name="banco_cpf" maxlength="11" placeholder="000.000.000-00" id="cpf" value="<?php echo $dados_usuario[banco_cpf]; ?>" class="form-control" placeholder="Só números" required>
      </div>
      </div>
       
      ===============
       
      }).trigger('focusout');
      $("#cpf").mask("999.999.999-99");
      $("#rg").mask("99.999.999-*");
      });
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.