post

Como Adicionar Mascara (Formatação) de Telefone/Celular em Campo Input HTML c/ JavaScript

Publicado em: 05/02/2024

Categorias: BlogHTMLJavaScriptjQueryJS

Se você precisa criar uma máscara para formatar o campo de telefone ou celular da sua aplicação online, você pode utilizar este código JavaScript abaixo:

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="uk-margin">
    <label> <strong>Telefone ou Celular</strong>
      <input class="uk-input sp_celphones" type="text" name="telefone" placeholder="Ex: (11) 90000-9999">
    </label>
</div>

<script>
$(document).ready(function(){
    var SPMaskBehavior = function (val) {
      return val.replace(/\D/g, '').length === 13 ? '+55 (00) 00000-0000' : '+55 (00) 0000-00009';
    },
    spOptions = {
      onKeyPress: function(val, e, field, options) {
          field.mask(SPMaskBehavior.apply({}, arguments), options);
        }
    };

    $('.sp_celphones').mask(SPMaskBehavior, spOptions);
});
</script>

Após adicionar o código JavaScript, apenas adicione a Class sp_celphones, no campo que deseja formatar. 

Caso precise personalizar a sua formatação, edite a linha correspondente abaixo: 

return val.replace(/\D/g, '').length === 13 ? '+55 (00) 00000-0000' : '+55 (00) 0000-00009';

Espero ter ajudado.


Link de compartilhamento

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.

bruno.art.br/pb/4260

ID de Referência: 4260

Sugira uma publicação

Envie uma mensagem para mim, e sugira alguma publicação de algum tema que tenha dificuldades de resolver.

Clique aqui e entre em contato


Comentários