Mask for landline field does not work

Asked

Viewed 975 times

1

I tried to create a simple mask for my form, however the landline is not returning as expected.

Code: 

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)">

Upshot:

inserir a descrição da imagem aqui

javascript

  • have tried to put a Return in this function, I’m giving a kick, I do not know if the object there is passed by reference or not.

  • Even with Return, it didn’t work.

  • Check if there is an error in the browser console?

  • The problem is the condition, the logic is to check if the element is different from the element of the mask and add the previous one in value, but the previous one does not exist, this is breaking the logic.

  • No error on console.

  • put 0 in place of #

  • You can even do it this way you are trying, but you have already checked the possibility of using a Jquerymask plugin is very good and more practical. https://igorescobar.github.io/jQuery-Mask-Plugin/docs.html

  • 2

    Possible duplicate of Change phone mask

  • @Pauloxavier Note: you should mark the answer that best served you

Show 4 more comments

2 answers

1


Reformulating the answer, I made a function for you to pass an input and also the mask you want to format. with it you no longer need to put in html the size, and maxlength, because now it will obey the size of your mask.

Remembering that you will be able to use for any mask that passes with the format '#####-###' , '(##)#####-####'

<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" >

  • Friend, I made a function to obey your mask format for example ####-##########################################################################################.

0

I realized that you need a pure Javascript mask, according to your code, so since the problem is in the phone mask, check the possibility of creating a phone-only mask with regular expressions. Following functional example.

Obs: If you want to mobile just change maxlength to 15 and support 9 numbers after 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 -->

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.