Mask for fixed telephone field does not work

Navigation
1

I tried to create a simple mask for my form, but 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)">

Result:

    
asked by anonymous 07.12.2017 / 18:09

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 mascara.

Remembering that you will be able to use any masks that pass in 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" >
    
07.12.2017 / 19:09
0

I noticed that you need to mask in pure JavaScript, 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. Here is a functional example.

Obs : If you want to mobile just change maxlength to 15 and will 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 -->
    
07.12.2017 / 18:32
Is it possible to compare schema between different banks in SQL Server? Help to understand localStorage.js