Ir ao conteúdo
  • Cadastre-se
fredkissfree

Javascript Máscara de telefone para formulário

Recommended Posts

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>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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?

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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.

Compartilhar este post


Link para o post
Compartilhar em outros sites
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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

  • Curtir 3

Compartilhar este post


Link para o post
Compartilhar em outros sites
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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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>

 

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

@fredkissfree O seu jeito funciona igual.  Na verdade, você pode colocar um javascript em qualquer parte da página que ele vai ser interpretado.

Mas pelas boas práticas, o ideal é atualmente é deixar todo o javascript no final do body.

Só lembre que para funcionar corretamente, o jQuery precisa ser carregado acima de todos os outros scripts jquery e plugins.

 

De preferência usar a versão MIN do jquery. pois é otimizada para velocidade de carregamento.

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@DiF Deu certo, arrumei...

 

Muito obrigado a todos pelas informações, essas boas práticas é sempre bom a gente aprender.

 

Obrigado

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×