Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Rodrigo Tschope

Máscara

Recommended Posts

Oi pessoal, joia!? Seguinte, to querendo fazer um traço automatico em formulario de telefone aqui. Ele funcionaria da seguinte forma:Tem 2 campos; DDD e Telefone - >No campo ddd ao digitar 2 numeros já muda automatico para o campo de telefone...No campo telefone ao digitar 4 digitios parece um traço para no final o telefone ficar assim: 18 1234-5678Alguem tem a solução?!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Isso é uma máscara, veja:

 

/*Descrição.: formata um campo do formulário deacordo com a máscara informada...Parâmetros: - objForm (o Objeto Form)- strField (string contendo o nome do textbox)* - sMask (mascara que define o* formato que o dado será apresentado,* usando o algarismo "9" para* definir números e o símbolo "!" para* qualquer caracter...* - evtKeyPress (evento)* Uso.......: <input type="textbox"* name="xxx".....* onkeypress="return txtBoxFormat(document.rcfDownload, 'str_cep', '99999-999', event);">* Observação: As máscaras podem ser representadas como os exemplos abaixo:* CEP -> 99.999-999* CPF -> 999.999.999-99* CNPJ -> 99.999.999/9999-99* Data -> 99/99/9999* Tel Resid -> (99) 999-9999* Tel Cel -> (99) 9999-9999* Processo -> 99.999999999/999-99* C/C -> 999999-!* E por aí vai...***/function txtBoxFormat(objForm, strField, sMask, evtKeyPress) {var i, nCount, sValue, fldLen, mskLen,bolMask, sCod, nTecla;if(document.all) { // Internet Explorer	nTecla = evtKeyPress.keyCode;} else if(document.layers) { // Nestcape	nTecla = evtKeyPress.which;} else {	nTecla = evtKeyPress.which;	if (nTecla == 8) {		return true;	}}sValue = objForm[strField].value;// Limpa todos os caracteres de formatação que// já estiverem no campo.// toString().replace [transforma em sring e troca elementos por ""]sValue = sValue.toString().replace( "-", "" );sValue = sValue.toString().replace( "-", "" );sValue = sValue.toString().replace( ".", "" );sValue = sValue.toString().replace( ".", "" );sValue = sValue.toString().replace( "/", "" );sValue = sValue.toString().replace( "/", "" );sValue = sValue.toString().replace( "/", "" );sValue = sValue.toString().replace( "(", "" );sValue = sValue.toString().replace( "(", "" );sValue = sValue.toString().replace( ")", "" );sValue = sValue.toString().replace( ")", "" );sValue = sValue.toString().replace( " ", "" );sValue = sValue.toString().replace( " ", "" );fldLen = sValue.length;mskLen = sMask.length;i = 0;nCount = 0;sCod = "";mskLen = fldLen;while (i <= mskLen) {bolMask = ((sMask.charAt(i) == "-") || (sMask.charAt(i) == ":") || (sMask.charAt(i) == ".") || (sMask.charAt(i) == "/"))bolMask = bolMask || ((sMask.charAt(i) == "(") || (sMask.charAt(i) == ")") || (sMask.charAt(i) == " ") || (sMask.charAt(i) == "."))//Se for true utiliza elementos especiais aumenta a máscaraif (bolMask) {	sCod += sMask.charAt(i);	mskLen++;//Caso false mostra o sValue(o q foi digitado)} else {	sCod += sValue.charAt(nCount);	nCount++;}i++;}objForm[strField].value = sCod;if (nTecla != 8) { // backspace	if (sMask.charAt(i-1) == "9") { // apenas números...	return ((nTecla > 47) && (nTecla < 58)); } // números de 0 a 9else { // qualquer caracter...	return true;}} else {	return true;}}//Fim da Função Máscaras Geraisfunction EstaCompleto(txtAtual,intTamanho,txtProximo){		if(txtAtual.value.length == intTamanho)	{		txtProximo.focus();	}}

e uso:

 

<input id="ddd" value="" onKeyUp='EstaCompleto(this,2,document.getElementById("fone"));'><input id="fone" value="" onKeyPress="return txtBoxFormat(this.form, this.name, '9999-9999', event);">

Compartilhar este post


Link para o post
Compartilhar em outros sites

Tiago, muito bom esse script. Bem legal mesmo. Agora deixa eu te explica, tem no meu script um bloqueador para so ter numeros nesse campo de telefone, você sabe como acrescentar tipo assim, para ter numero e o traço?! o codigo q tenho em mão eh esse:<code><script type="text/javascript"> function validaForm(){ d = document.cotacao; //validar nome if (d.nome.value == ""){ alert("Por favor, escreva seu nome."); d.nome.focus(); return false; } //validar email if (d.email.value == ""){ alert("Por favor, informe seu e-mail de contato."); d.email.focus(); return false; } //validar email(verificao de endereco eletrônico) parte1 = d.email.value.indexOf("@"); parte2 = d.email.value.indexOf("."); parte3 = d.email.value.length; if (!(parte1 >= 3 && parte2 >= 6 && parte3 >= 9)) { alert ("O campo de e-mail deve ser conter um endereco eletronico!"); d.email.focus(); return false; } //validar cidade if (d.cidade.value == ""){ alert("Por favor, escreva a cidade de onde reside."); d.cidade.focus(); return false; } //validar ddd(verificacao se contem apenas numeros) if (isNaN(document.cotacao.ddd.value)){ alert("O campo DDD deve conter apenas numeros."); document.cotacao.ddd.focus(); return false; } //validar ddd if (d.ddd.value == ""){ alert("Por favor, informe seu o DDD do telefone de contato."); d.ddd.focus(); return false; } if (d.tel.value == ""){ alert("Por favor, informe o telefone de contato."); d.tel.focus(); return false; } //validar telefone(verificacao se contem apenas numeros) if (isNaN(document.cotacao.tel.value)){ alert("O campo do Telefone deve conter apenas numeros."); document.cotacao.tel.focus(); return false; } //validar necessidades if (d.necessidades.value == ""){ alert("Por favor, escreva suas necessidades para que possamos melhor atende-lo."); d.necessidades.focus(); return false; } return true; }</script></code>

Compartilhar este post


Link para o post
Compartilhar em outros sites

acho que isto resolve seu problema

deste modo o campo so aceita numero e faz a mascara do eito que você fdefinir em baixo com os #####

agora coloquei outro script pra so aceitar numeros

 

<!-- INICO MASCARAS ================================================================= --><script language="javascript">function Mascara(objeto, evt, mask) { var LetrasU = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';var LetrasL = 'abcdefghijklmnopqrstuvwxyz';var Letras  = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';var Numeros = '0123456789';var Fixos  = '().-:/ ';var Charset = " !\"#$%&\'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_/`abcdefghijklmnopqrstuvwxyz{|}~";evt = (evt) ? evt : (window.event) ? window.event : "";var value = objeto.value;if (evt) { var ntecla = (evt.which) ? evt.which : evt.keyCode; tecla = Charset.substr(ntecla - 32, 1); if (ntecla < 32) return true; var tamanho = value.length; if (tamanho >= mask.length) return false; var pos = mask.substr(tamanho,1); while (Fixos.indexOf(pos) != -1) {  value += pos;  tamanho = value.length;  if (tamanho >= mask.length) return false;  pos = mask.substr(tamanho,1); } switch (pos) {   case '#' : if (Numeros.indexOf(tecla) == -1) return false; break;   case 'A' : if (LetrasU.indexOf(tecla) == -1) return false; break;   case 'a' : if (LetrasL.indexOf(tecla) == -1) return false; break;   case 'Z' : if (Letras.indexOf(tecla) == -1) return false; break;   case '*' : objeto.value = value; return true; break;   default : return false; break; }}objeto.value = value;return true;}// FUNÇOES  =========================================================>// aqui você define os tipos de mascaras// no campo input você poe isso INPUT onkeypress="return MaskCPF(this, event)"function MaskCep(objeto, evt) {return Mascara(objeto, evt, '##.###-###');}function MaskTelefone(objeto, evt) {return Mascara(objeto, evt, '(##) ####-####');}function MaskCPF(objeto, evt) {return Mascara(objeto, evt, '###.###.###-##');}function MaskData(objeto, evt) {return Mascara(objeto, evt, '##/##/####');}function MaskData2(objeto, evt) {return Mascara(objeto, evt, '####');}</script><!-- SCRIPT SOMENTE NUMEROS ========================================== --><script language='JavaScript'>// no campo input você poe INPUT onkeypress='return SomenteNumero(event)'function SomenteNumero(e){	var tecla=(window.event)?event.keyCode:e.which;	if((tecla > 47 && tecla < 58)) return true;	else{	if (tecla != 8) return false;	else return true;	}}</script>

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.