44

Preciso mudar a posição do "-" na máscara.

<label for="telefone" >Telefone</label>
<input style="width:25%; margin-right:25% " type="tel" name="telefone" id="telefone" pattern="\([0-9]{2}\)[\s][0-9]{4}-[0-9]{4,5}" />
<script>$("#telefone").mask("(00) 0000-00009");</script>

Com esta solução o resultado é o seguinte para celulares "(99) 1234-12345" e para fixos (99)1234-1234.

Porém gostaria de deixar para celulares "(99) 12345-1234" e "(99)1234-1234".

1
  • Tenta colocar um evento onblur e contar os caracteres, daí se for 9 dígitos muda a mascara
    – KaduAmaral
    Commented 28/11/2014 às 12:22

14 Respostas 14

52

Você pode fazer assim:

jQuery("input.telefone")
        .mask("(99) 9999-9999?9")
        .focusout(function (event) {  
            var target, phone, element;  
            target = (event.currentTarget) ? event.currentTarget : event.srcElement;  
            phone = target.value.replace(/\D/g, '');
            element = $(target);  
            element.unmask();  
            if(phone.length > 10) {  
                element.mask("(99) 99999-999?9");  
            } else {  
                element.mask("(99) 9999-9999?9");  
            }  
        });
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>
Telefone: <input type="text" class="telefone" />

5
  • Muito bom de exemplo e obrigado! Utilizo cdn oficial cdnjs.com/libraries/jquery.maskedinput
    – KingRider
    Commented 18/07/2016 às 15:43
  • 3
    É possível fazer com que caso não haja o "9" depois do DDD, ele seja alterado na hora, e não só depois de clicar fora do input? Commented 22/08/2016 às 15:45
  • Excelente post @Thiago Thaison, me ajudou muito. Commented 30/12/2016 às 13:39
  • valeu, muito bom Commented 26/02/2018 às 19:49
  • E no caso de possibilitar tanto DDD com 2 dígitos, quanto DDD com 3 dígitos, como ficaria? Commented 12/08/2019 às 21:05
23

Você pode fazer isso no blur, não vejo uma alternativa melhor. Ou seja, faça o seguinte:

$('#fone').mask('(00) 0000-00009');
$('#fone').blur(function(event) {
   if($(this).val().length == 15){ // Celular com 9 dígitos + 2 dígitos DDD e 4 da máscara
      $('#fone').mask('(00) 00000-0009');
   } else {
      $('#fone').mask('(00) 0000-00009');
   }
});

Recentemente tive um problema com o uso de diversos inputs na mesma tela, $('.phone-mask') porque a máscara não era atualizada, pois o unmask guarda em uma variável o seletor, e como eu deveria remascarar apenas o input atual então não funcionava, ou seja meu código que era:

$('.phone-mask').mask('(00) 0000-00009');
$('.phone-mask').blur(function(event) {
   if($(this).val().length == 15){ // Celular com 9 dígitos + 2 dígitos DDD e 4 da máscara
      $(this).mask('(00) 00000-0009');
   } else {
      $(this).mask('(00) 0000-00009');
   }
});

Não funcionava pois a máscara não foi criada com o seletor this e sim com o seletor .phone-mask, porém se eu reaplicasse a máscara iria aplicar para todos os inputs da tela e eu não queria isso, então meu código ficou assim:

$('.phone-mask').each(function(i, el){
   $('#'+el.id).mask("(00) 00000-0000");
})
function updateMask(event) {
    var $element = $('#'+this.id);
    $(this).off('blur');
    $element.unmask();
    if(this.value.replace(/\D/g, '').length > 10) {
        $element.mask("(00) 00000-0000");
    } else {
        $element.mask("(00) 0000-00009");
    }
    $(this).on('blur', updateMask);
}
$('.phone-mask').on('blur', updateMask);
3
  • Ótima dica! Vou utilizar esta. Commented 28/11/2014 às 12:45
  • Modifiquei para funcionar o envio de celular. Alterei o pattern="([0-9]{2})[\s][0-9]{4,5}-[0-9]{4}". Commented 28/11/2014 às 17:21
  • 1
    fiz com keyup e ficou show!
    – Furlan
    Commented 2/03/2018 às 13:43
22

Outra opção para aplicar uma máscara em telefones com 8 ou 9 dígitos de forma dinâmica é usar o plugin jquery.inputmask.

São definidas duas máscaras uma para oito dígitos e outra para nove, o responsável por manter o hifen no lugar correto(ou desloca-lo) é keepStatic:true(por padrão ele é false) que faz a troca apenas quando o novo padrão é detectado ou seja depois de digitado o decimo quarto caracter.

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://rawgit.com/RobinHerbots/jquery.inputmask/3.x/dist/jquery.inputmask.bundle.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $("#telefone").inputmask({
        mask: ["(99) 9999-9999", "(99) 99999-9999", ],
        keepStatic: true
      });
    });
  </script>
</head>

<body>
  <input type="text" id="telefone" name="telefone" />
</body>

</html>

11

Dá de fazer assim:

var SPMaskBehavior = function (val) {
    return val.replace(/\D/g, '').length === 11 ? '(00) 00000-0000' : '(00) 0000-00009';
},
spOptions = {
    onKeyPress: function(val, e, field, options) {
        field.mask(SPMaskBehavior.apply({}, arguments), options);
    }
};

$('#telefone').mask(SPMaskBehavior, spOptions);
10

Muito mais simples meus amigos, segue minha sugestão: Acabei de precisar desta função:

1º - Definir a máscara padrão com a opção do nono dígito: (99) 9999-9999?9

2º - Criar um evento "onChange" para modificar a máscara assim que o campo for alterado (no caso, o telefone).

Lembrando que estamos tratando de uma máscara a respeito do plugin Masked Input Plugin. Muitos confundem com outros plugins e por isso o código não funciona. http://digitalbush.com/projects/masked-input-plugin

<script type="text/javascript">
jQuery( function($){
    $(".maskFone").mask("(99) 9999-9999?9");
    $(".maskFone").blur(function(event) {
        if($(this).val().length == 15){
          $('.maskFone').mask('(99) 99999-999?9');
        } else {
          $('.maskFone').mask('(99) 9999-9999?9');
        }
    });
});

9

Encontrei um javascript puro chama Vanilla Masker e difícil de encontrar.

Entre o código http://codepen.io/KingRider/pen/qNxror

ou abaixo

function inputHandler(masks, max, event) {
	var c = event.target;
	var v = c.value.replace(/\D/g, '');
	var m = c.value.length > max ? 1 : 0;
	VMasker(c).unMask();
	VMasker(c).maskPattern(masks[m]);
	c.value = VMasker.toPattern(v, masks[m]);
}

var telMask = ['(99) 9999-99999', '(99) 99999-9999'];
var tel = document.querySelector('input[attrname=telephone1]');
VMasker(tel).maskPattern(telMask[0]);
tel.addEventListener('input', inputHandler.bind(undefined, telMask, 14), false);

var docMask = ['999.999.999-999', '99.999.999/9999-99'];
var doc = document.querySelector('#doc');
VMasker(doc).maskPattern(docMask[0]);
doc.addEventListener('input', inputHandler.bind(undefined, docMask, 14), false);
div {
  font-family: Arial;
  padding: 5px;
  margin-bottom: 10px;
}  
input {
  box-sizing: border-box;
  padding: 10px;
  border-radius: 5px;
  border-color: black;
  width: 250px;
  font-size: 1.3em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-masker/1.1.0/vanilla-masker.min.js"></script>
<!-- Sandro Alvares (Não utilize jQuery & Javascript puro) -->
<div>
<label for="tel">Telefone</label>
<input attrname="telephone1" type="text">
<br><div>
<label for="doc">CPF/CNPJ</label>
<input id="doc" type="text">

Tutorial Oficial: https://github.com/BankFacil/vanilla-masker

Ele é brasileiro, Vanilla é parabéns!

1
  • 2
    Muito bacana! tava quase desistindo de usar máscara sem jquery.
    – Paulo
    Commented 2/04/2017 às 12:45
9

Solução quase atômica:

    $(".phone-mask").mask("(99) 9999-9999?9").on("focusout", function () {
        var len = this.value.replace(/\D/g, '').length;
        $(this).mask(len > 10 ? "(99) 99999-999?9" : "(99) 9999-9999?9");
    });
8

De acordo com a documentação:

var SPMaskBehavior = function (val) {
        return val.replace(/\D/g, '').length === 11 ? '(00) 00000-0000' : '(00) 0000-00009';
},
spOptions = {
    onKeyPress: function(val, e, field, options) {
                      field.mask(SPMaskBehavior.apply({}, arguments), options);
                    }
};

$('#id_tel_1').mask(SPMaskBehavior, spOptions);

Testei e funcionou perfeitamente.

4

pode fazer usando expressões regulares. Ex:

function mascaraTelefone(number) {
    var regex = /^(.{1,2})(.{4,5})(.{4})/g;
    var number = `number`;
    var subst = `($1)$2-$3 `;

    var resultado = str.replace(regex, subst);
}
4

Essa foi a que resolveu meu problema. Muito Obrigado!

jQuery("input.telefone")
        .mask("(99) 9999-9999?9")
        .focusout(function (event) {  
            var target, phone, element;  
            target = (event.currentTarget) ? event.currentTarget : event.srcElement;  
            phone = target.value.replace(/\D/g, '');
            element = $(target);  
            element.unmask();  
            if(phone.length > 10) {  
                element.mask("(99) 99999-999?9");  
            } else {  
                element.mask("(99) 9999-9999?9");  
            }  
        });
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>
Telefone: <input type="text" class="telefone" />

4

Uma melhor e mais fácil solução

$("#telefone").inputmask({
    mask: ["(99) 9999-9999", "(99) 99999-9999", ],
    keepStatic: true
});

Usando o plugin https://github.com/RobinHerbots/jquery.inputmask

1
  • 2
    Escreva um pouco mais sobre sua solução. Qual plugin você está usando? Onde encontrar este inguinal? Estas respostas ajudam sua respostas a ficar mais completa e melhor vista :D Commented 17/07/2018 às 20:19
3

Tive problemas com a maioria das respostais atuais.. consegui fazer funcionar com o seguinte script:

    jQuery('input.your-tel')
        .mask('(99) 99999-9999')
        .focusout(function (event) {
            let target, phone, element;
            target = (event.currentTarget) ? 
                     event.currentTarget : 
                     event.srcElement;
            phone = target.value.replace(/\D/g, '');
            element = jQuery(target);
            element.unmask();
            if (phone.length > 10) {
                element.mask("(99) 99999-9999");
            } else {
                element.mask("(99) 9999-99999");
            }
        });
1

Para a versão v1.14.12 do plugin Jquery Mask.

Você poderá utilizar a seguinte solução: Sendo Z, o dígito opcional.

$(document).ready(function(){
    $('#telefone1').mask("+55 31 9999-9999Z", {
      translation: {
         'Z': {
            pattern: /[0-9]/, optional: true
         }
       }
    });

});
-1

Dessa forma você pode adicionar um digito opcional.

$(function ($) { $("#telefone").mask("(99)9999-9999?9"); });
1
  • Dessa forma vai ficar com a máscara errada com o 9 dígito ao final: (99)9999-99999 Commented 18/11/2020 às 13:56

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 .