1

Tentei criar uma máscara simples para o meu formulário, porém o telefone fixo não esta retornando o esperado.

Código:

function formatar(mascara, documento){
  var i = documento.value.length;
  var saida = mascara.substring(0,1);
  var texto = mascara.substring(i)
  if (texto.substring(0,1) != saida){
    documento.value += texto.substring(0,1);
  }
}
<label for="Cep"> CEP: </label>
<input type="text" size="8" id="Cep" maxlength="9" OnKeyPress="formatar('#####-###', this)">
<br>
<label id="data">Data de Nascimento:</label>
<label for="Cdata"></label>
<input type="text" name="data" id="data" size="9" maxlength="10" OnKeyPress="formatar('##/##/####', this)">
<br>
<label for="Cpf"> CPF:</label>
<input type="text" id="Cpf" size="12" maxlength="14"  OnKeyPress="formatar('###.###.###-##', this)"/>
<br>
<label for="Crg"> RG:</label>
<input type="text" name="Trg" id="Crg" size="12" maxlength="14" OnKeyPress="formatar('##.###.###-##', this)">
<br>
<label for="TelF"> Tel Fixo</label>
<input type="text" name="fTel" id="TelF" size="14" maxlength="14" OnKeyPress="formatar('(##) ####-####', this)">

Resultado:

inserir a descrição da imagem aqui

9
  • já tentou colocar um return nessa função, estou dando um chute, não sei se o objeto ai é passado por referencia ou não. 7/12/2017 às 17:19
  • Mesmo com return, não deu certo. 7/12/2017 às 17:26
  • Verificou se está dando algum erro no console do navegador? 7/12/2017 às 17:27
  • O Problema é a condição, a logica é verificar se o elemento é diferente do elemento da mascara e adicionar o anterior no value, porém o anterior do primeiro não existe, isso está quebrando a lógica.
    – arllondias
    7/12/2017 às 17:28
  • 2
    Possível duplicata de Alterar máscara do telefone
    – NoobSaibot
    8/12/2017 às 1:37

2 Respostas 2

1

Reformulando a resposta, fiz uma função para que você passe um input e também a máscara que deseja formatar. com ela você não precisa mais colocar no html o tamanho, e o maxLength, pois agora ele irá obedecer o tamanho da sua mascara.

Lembrando que você irá conseguir usar pra qualquer mascara que passar com o formato '#####-###' , '(##)#####-####'

<script>
    $(document).ready(function () {

        var input = $('#inputCEP');

        function format(mask, input) {
            var value = input.val();
            if (value.length < mask.length) {
                if (mask[value.length] != '#') {
                    input.val(value + mask[value.length]);
                } else {
                    input.val(value);
                }
            } else {
                return input.val(value.substring(0, mask.length -1));
            }
        };

        input.keypress(function (item) {
            format('(##)#####-####', input);
        });

    });
</script>
<input style="width: 50%" id="inputCEP" type="text" >

1
  • Amigo, fiz uma função para obedecer seu formato de máscara por exemplo #####-### que é o de cep, caso você mude o formato de mascara a função irá funcionar e também não deixará o usuário digitar mais digitos que a mascara permite. 7/12/2017 às 18:27
0

Percebi que precisa de máscara em JavaScript puro, de acordo com seu código, então já que o problema é na máscara do telefone, verifique a possibilidade de criar uma máscara só para telefone com expressões regulares. Segue exemplo funcional.

Obs: Caso queira para celular basta alterar maxlength para 15 e suportará 9 números após o DDD

/* Máscaras ER */
function mascara(o,f){
    v_obj=o
    v_fun=f
    setTimeout("execmascara()",1)
}
function execmascara(){
    v_obj.value=v_fun(v_obj.value)
}
function mtel(v){
    v=v.replace(/\D/g,"");             //Remove tudo o que não é dígito
    v=v.replace(/^(\d{2})(\d)/g,"($1) $2"); //Coloca parênteses em volta dos dois primeiros dígitos
    v=v.replace(/(\d)(\d{4})$/,"$1-$2");    //Coloca hífen entre o quarto e o quinto dígitos
    return v;
}
function id( el ){
        return document.getElementById( el );
}
window.onload = function(){
        id('telefone').onkeypress = function(){
                mascara( this, mtel );
        }
}
<div class="col-lg-12"><!-- Inicio Div Telefone -->
    <label>Telefone: </label>
    <input  type="text"  class="form-control" id="telefone" maxlength="14" name="telefone">
</div><!-- Fim Div Telefone -->

2

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .