Javascript Máscara de telefone para formulário

fredkissfree · 2 de agosto de 2018

Bom dia, tenho um simples form (Nome, Telefone, E-mail, Assunto e Mensagem), eu gostaria de colocar uma mascara para meu campo telefone, onde insere os parenteses e o traço entre os números. Estou com 2 dúvidas...

1 - Melhor fazer em Javascript já que é um campo só ou usar o JQuery? (talvez o JS carrega mais rápido que o Jquery?)

2 - No caso do telefone, tem um campo só que usa para celular ou fixo, o problema é que quando eu for colocar o traço depois dos 4 primeiro dígitos vai dar problema caso for celular (19) 9222-21111. Geralmente esses form tem alguma regra de se começar colocando o 9 que todo celular tem, ele coloca o traço só a partir do 5 digito? ai ficaria (19) 92222-1111?

Meu código em JavaScript é este:

<html>
<head>
    <title>Mascara Telefone</title>
    <script type="text/javascript">
        function mascara(telefone){ 
            if(telefone.value.length == 0)
                telefone.value = '(' + telefone.value; 
            if(telefone.value.length == 3)
                telefone.value = telefone.value + ') '; 
 
            if(telefone.value.length == 8)
                telefone.value = telefone.value + '-';
  
}
    </script>
 
</head>
    <body>
 
        Telefone: <input type="text" name="telefone" id="telefone" size="20" maxlength="14" onkeypress="mascara(this)"> 
 
    </body>
</html>

fredkissfree · 2 de agosto de 2018

Com o JavaScript está dando errado quando vou testar mobile, no Android quando abro não funciona, acho que vou ter que fazer com JQuery com algum if caso a pessoa começar com 9 indicando que é celular e não fixo.

2 de agosto de 2018

Olha isso aqui: https://igorescobar.github.io/jQuery-Mask-Plugin/

Extremamente fácil de usar!

fredkissfree · 2 de agosto de 2018

@fspjonny Obrigado, fácil mesmo, vou add...

E tu acha melhor inserir mais um campo ficando Tel: e Celular: ou colocar um IF caso a pessoa começe colocando o 9 ele vira Celular?

Leonardo0308 · 2 de agosto de 2018

@fredkissfree no plugin que o @fspjonny passou tem a opção "São Paulo Celphones" que já faz a conversão com 8 ou 9 dígitos.

fredkissfree · 2 de agosto de 2018

@Leonardo0308 Eu vi, to add aqui, mas o que eu sei fazer é add cada mascara para cada campo, não sei fazer um campo só com 2 mascaras.

Acho melhor fazer 2 campos.

Leonardo0308 · 2 de agosto de 2018

9 minutos atrás, fredkissfree disse:

não sei fazer um campo só com 2 mascaras.

Não entendi o por que você precisaria de 2 mascaras em 1 campo.

XenoStory · 2 de agosto de 2018

Boa tarde, @fredkissfree

Acredito que não seja necessário utilizar duas máscaras mesmo, pelo que olhei no site do plugin, a máscara "São Paulo Celphones" já atende suas necessidades, pois padroniza corretamente ambos os casos (celulares ou telefones comuns), então acho que é tranquilo utilizar apenas essa máscara.

Abraços.

fredkissfree · 2 de agosto de 2018

@XenoStory aahhhh entendi, vou testar é que estava com erro aqui no meu.

Estou chamando meus scripts todos depois do body, inclusive o mask, no entanto, o:

<script src="library/js/jquery-3.2.1.js" type="text/javascript"></script>

só pode ser declarado dentro de head, se eu declaro junto com o mask abaixo do body não funciona.

2 de agosto de 2018

Um campo e duas máscaras certo?

testa esse código aqui!

$(document).ready(function(){

/* Condicional que verifica se é celular ou telefone fixo*/	
		
	$('#tipoTelefone').on('change',function(){
		
		var texto = $(this).val().length;
		
		if (texto == "9"){
			$('#tipo').html('Telefone Celular com : '+ texto + ' dígitos');
			$('#tipoTelefone').mask('000000000', {placeholder: "_____-____"});
			
		} else if(texto == "8") {
			$('#tipo').html('Telefone Fixo com: '+ texto + ' dígitos');
			$('#tipoTelefone').mask('00000000', {placeholder: "____-____"});
			
		}
	});

	
	
});

adicionado 2 minutos depois

agora, fspjonny disse:

Um campo e duas máscaras certo?

testa esse código aqui!


$(document).ready(function(){

/* Condicional que verifica se é celular ou telefone fixo*/	
		
	$('#tipoTelefone').on('change',function(){
		
		var texto = $(this).val().length;
		
		if (texto == "9"){
			$('#tipo').html('Telefone Celular com : '+ texto + ' dígitos');
			$('#tipoTelefone').mask('000000000', {placeholder: "_____-____"});
			
		} else if(texto == "8") {
			$('#tipo').html('Telefone Fixo com: '+ texto + ' dígitos');
			$('#tipoTelefone').mask('00000000', {placeholder: "____-____"});
			
		}
	});

	
	
});

O que deve fazer ai agora que eu lembrei é adaptar mais casa decimais ao DDD, eu não fiz isso nesse exemplo, em todo caso são 2 ou 3 números a mais a verificar por exemplo DDD 21 ou DDD 021, como desejar.

fredkissfree · 2 de agosto de 2018

Deu certo, o que eu usei foi este aqui:

	<script type="text/javascript">
		$(document).ready(function(){

		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);	

		})
	</script>

Funcionou perfeito. Obrigado a todos.

DiF · 2 de agosto de 2018

1 hora atrás, fredkissfree disse:

só pode ser declarado dentro de head, se eu declaro junto com o mask abaixo do body não funciona.

Na verdade, para funcionar, o jQuery precisa ser carregado antes de todos os outros plugins e e códigos jQuery.

Sim, você pode e deve colocar todos os javascripts e plugins no final do body. Deixe o head para os css.

fredkissfree · 2 de agosto de 2018

@DiF para o meu funcionar teve que fica assim:

A parte do Head (tirei o que não importa)

O JS ficou aqui no head

<head>
	<!-- Font Awesome -->
	<link href="library/fontawesome/5.0.13/web-fonts-with-css/css/fontawesome-all.min.css" rel="stylesheet">
	
    <!-- Bootstrap -->
	<link href="library/css/bootstrap.min.css" rel="stylesheet" />
	<link href="library/css/cesf.css" rel="stylesheet"/>

	<!-- JS -->
	<script src="library/js/jquery-3.2.1.js" type="text/javascript"></script>
	
	<script type="text/javascript">
		$(document).ready(function(){

		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);	

		})
	</script>

</head>

Depois do Body ficou assim:

Ou seja a outra parte do JS

<!-- JS -->
<script src="library/js/jquery-ui-1.12.1.custom.min.js" type="text/javascript"></script>
<!-- JS Plugin Mascara do Formulario -->
<script src="library/js/jquery.mask.min.js" type="text/javascript"></script>

<!-- Popper para dropdown dos idiomas -->
<script src="library/js/popper.js" type="text/javascript"></script>
<script src="library/js/bootstrap.min.js" type="text/javascript"></script>

<!-- Bootstrap Switches para descer header na home -->
<script src="library/js/bootstrap-switch.min.js"></script>

<!-- Plugins Slider -->
<script src="library/js/nouislider.js"></script>

<!--  Funções e inicialização, abrir bootstrap mobile -->
<script src="library/js/cesf.js"></script>

</html>