post #4260
Como Adicionar Mascara (Formatação) de Telefone/Celular em Campo Input HTML c/ JavaScript
Publicado em: 05/02/2024 / Atualizado em: 05/02/2024
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.
Publicações recomendadas:
Link Direto
Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link direto abaixo. Basta copiar.
bruno.art.br/?p=4260
ID de Referência: 4260
Sugira uma publicação
Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.