Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
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






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

×