13

Como adicionar o nono digito, de forma fixa, utilizando o jQuery Mask?

$('#telefone').mask('(00) 90000-0000');

Dessa forma que utilizo é apenas opcional.

11
  • O que queres dizer com "nono dígito"? queres dizer ter o 9 obrigatoriamente?
    – Sergio
    Commented 19/06/2015 às 20:30
  • O dígito 9 deve já conter na máscara, ficando por exemplo: (88) 98888-8888. Editei a questão para esclarecê-la. Commented 19/06/2015 às 20:34
  • Qual destes estás a usar? -> plugins.jquery.com/tag/mask
    – Sergio
    Commented 19/06/2015 às 20:35
  • Este: igorescobar.github.io/jQuery-Mask-Plugin Commented 19/06/2015 às 20:36
  • 2
    Eu tenho um celular de Juiz de Fora (que ainda está com 8 dígitos). Como eu faço pra me cadastrar no seu site?
    – user25930
    Commented 23/06/2015 às 20:38

4 Respostas 4

9
+50

Soluções:

Podes adicionar o 9 manualmente quando o usuário estiver digitando o telefone:

$('#telefone').mask('(00) 00000-0000').on('keyup', function(event){
   event.preventDefault();
   var v = this.value;
   console.log(v.length);
   if (v.length == 3) this.value = v+') 9';
});

Podes fazer uma validação no blur (ao sair do campo), para adicionar o nono dígito:

$(document).on('blur', '#telefone', function(event){
    var vl = this.value;
    if (vl.length == 14){
      vl = vl.slice(0,5)+'9'+vl.slice(5);
    }
    this.value = vl;
});

Também podes obrigar o usuário a digitar o 9:

$('#telefone').mask('(00) Z0000-0000', {
   translation: {
     // A regra diz que o carácter Z digitado tem que ser 9 e não é opcional
     'Z': {
       pattern: /[9]/, optional: false 
     }
   }
});

Exemplos:

$('.automatico').mask('(00) 00000-0000').on('keyup', function(event){
   event.preventDefault();
   var v = this.value;
   console.log(v.length);
   if (v.length == 3) this.value = v+') 9';
});


$('.blur').mask('(00) 00000-0000').on('blur', function(event){
    var vl = this.value;
    if (vl.length == 14){
      vl = vl.replace('-', '');
      vl = vl.slice(0,5)+'9'+vl.slice(5, 9)+'-'+vl.slice(9);
    }
    this.value = vl;
});


$('.obrigar').mask('(00) Z0000-0000', {
   translation: {
     // A regra diz que o carácter Z digitado tem que ser 9 e não é opcional
     'Z': {
       pattern: /[9]/, optional: false 
     }
   }
}).on('blur', function(event){
    if (this.value.length < 15){
      alert('Telefone inválido');
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js"></script>

Adicionar "automaticamente": 
<input type="text" class="automatico"><br>

No blur: 
<input type="text" class="blur"><br>

Obrigar a digitar: 
<input type="text" class="obrigar"><br>

5
  • Preciso que o dígito 9 (nove) esteja fixo na máscara. Commented 19/06/2015 às 20:46
  • Endendi depois que tinha submetido a resposta. Já corrigi.
    – KaduAmaral
    Commented 19/06/2015 às 20:48
  • Obrigado, @kaduAmaral. Eu vi desta forma, porém preciso que o dígito 9 esteja lá na máscara já. Commented 19/06/2015 às 21:01
  • De nada @MarcelodeAndrade, se entendi corretamente, acredito que o que você quer não é o mais "correto" a se fazer, pois estará atrapalhando o usuário a inserir a informação, mas da pra fazer usando o evento keyup, quase da mesma forma do blur.
    – KaduAmaral
    Commented 19/06/2015 às 21:04
  • Sua solução "automática" foi o que de fato precisava, de uma outra forma, porém funcional. Commented 25/06/2015 às 15:26
5

Pelo que vi na documentação não da pra forçar com a opções do plugin mas você pode usar um placeholder para indicar o formato e usar um fallback para forçar a entrada do número 9:

$('#telefone').mask("(00) K0000-0000", {
    placeholder: "(__) 9____-____",
    translation: {
        'K': {
            pattern: /9/,
            fallback: '9'
        }
    }
});

Assim ele espera que o usuário digite o digito '9' mas se não o fallback insere o '9' automaticamente.

exemplo: http://jsfiddle.net/sbh1jrx8/2/

3

Você tem certeza que você não quer deixar o campo sem máscara, processar o input no change com .replace(/[^0-9]/g, '') e depois reformatar o número se necessário? Estamos em 2015, programando pra processadores de 64 bits com gigabytes de memória; não é razoável que (61) 3411-1221, (0xx61) 3411 1221 ou 06134111221 sejam todas formas válidas de entrada para o mesmo número de telefone?


Se você absolutamente insiste em travar a entrada do número de telefone, você pode colocar algo tipo

<input type="text" pattern="(?:\(?0?(?:xx)?[1289][1-9]\)?\s*\d|\(?0?(?:xx)?[34567][1-9]\)?\s*)\d{4}[ -]?\d{4}">

no seu formulário — naturalmente, você vai precisar mexer no lado esquerdo da expressão regular à medida que a migração para o 9º dígito for avançando; isso vai reclamar de telefones inválidos usando a API de validação do HTML5.

0

Cara tem um exemplo de bom, de uma outra pergunta semelhante daqui no stack:

Como criar máscaras em input com JavaScript?

Exatamente com esse exemplo, não fixa o Nono digito mais força o usuário a digitar, ai você pode validar a quantidades de caracteres, sei lá srsrsrs.

<html>
<head>
    <title>Mascara Telefone</title>
<script type="text/javascript">
/* 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 );
    }
}
</script>

</head>
<body>

    <input type="text" name="telefone" id="telefone" maxlength="15" />

</body>
</html>

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 .