[Resolvido] mascara para input telefone

11closed · Abril 1, 2010

ola

to usando um script para fazer uma mascara de telefone com DDD e o telefone tipo assim "00.0000.0000"

na hora do cadastro deu certo mais na pagina de alteração o script ñ funciona.

olha

script

function mascara(src, mask){
 var i = src.value.length;
 var saida = mask.substring(0,1);
 var texto = mask.substring(i)
 if (texto.substring(0,1) != saida) {
  src.value += texto.substring(0,1);
 }
}

HMTL

<script src="scripts/scripts.js" type="text/javascript"></script>
echo "<label>DDD e Telefone: </label><input type='text' name='telefone' value='".$linhas["telefone"]."' onkeypress='this.value=ignoreSpaces(this.value);return Numero(event);mascara(this, '00.0000.0000');'></input></br>";

não sei por ñ esta pegando, se eu apago o "mascara(this, '00.0000.0000');" os outros pegam ignoreSpaces e return numero.

alguem pode me ajudar ??

t+

Thiago Retondar · Abril 1, 2010

Essa aqui que o Klonder fez é muito boa! Bem completa.

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

11closed · Abril 3, 2010

ola

ñ entendo poq, aqui esse script pega

 <script src="scripts/scripts.js" type="text/javascript"></script>
<li>DDD e Telefone: <input type="text" name="telefone" value="<?php if (sizeof($erro) != 0) { echo $telefone; } ?>" onkeypress="this.value=ignoreSpaces(this.value); mascara(this, '00.0000.0000'); return Numero(event);"></li>

function mascara(src, mask){
 var i = src.value.length;
 var saida = mask.substring(0,1);
 var texto = mask.substring(i)
 if (texto.substring(0,1) != saida) {
  src.value += texto.substring(0,1);
 }
}

mais assim ele ñ pega

<script src="scripts/scripts.js" type="text/javascript"></script>
<?php
echo "
<label>DDD e Telefone: </label><input type='text' name='telefone' value='".$linhas["telefone"]."' onkeypress='this.value=ignoreSpaces(this.value);return Numero(event);mascara(this, '00.0000.0000');'></input></br>
";
?>

porque sera ?

t+

klonder · Abril 3, 2010

Eu sei que eu sou "suspeito" para falar, mas o script que o Thiago Retondar citou já está pronto, tem controle da tecla backspace (caso o usuário digite algo errado e queira voltar para corrigir), permite o uso de qualquer tipo de máscaras, mesmo algo estranho como (89) <!--- 4545 (89) (sem que a função seja alterada) e também permite o uso de espaços/pontos.

Vale a pena conferir, e também criticar, caso você encontre algo nela que não gostou.

11closed · Abril 7, 2010

ola klonder

segui o consenho se e do Thiago Retondar

mais ñ deu certo quando eu digito lago nos input sai uma tecla as outras conforme eu vo digitano vai apagando. poq sera ?

<script type="text/javascript">
var trava = false;
var iCount1, iCount2, iCount, iTexto, nChar;
function MaskDown(e) {    	
 if(trava == false) {            	
  iTexto = e.value;                         	
  iCount1 = e.value.length;                       	
  trava = true;    	
 }
}
function MaskUp(e,msc) {
 iCount2 = e.value.length;
 if (iCount2 > iCount1) {                	
  e.value = e.value.substr(0,iCount1+1);	
  if(e.value.length > msc.length) {            	
   e.value = e.value.substr(0,msc.length);    	
  }    	
  if(iCount1 == 0) {                           	
   if (msc.substring(iCount1,iCount1+1) != "#") {                    	
    nChar=1;   
    while (msc.substring(iCount1+nChar,iCount1+nChar+1) != "#" && nChar <= msc.length) {                            	
     nChar++;                            	
    }
    e.value = msc.substring(0,iCount1+nChar) + e.value.substr(0,iCount1+1);            	
   }       	
  } else {           	
   if (msc.substring(iCount1+1,iCount1+2) != "#") {                   	
    var nChar=1;                    	
    while (msc.substring(iCount1+nChar,iCount1+nChar+1) != "#" && nChar <= msc.length) {                            	
     nChar++;                            	
    }                    	
    e.value = e.value.substr(0,iCount1+1) + msc.substring(iCount1+1,iCount1+nChar);            	
   }    	
  }
 // -------------------- Caso 2: Deleção de caracteres | Backspace --------------------
 } else {            	
  if (msc.substr(iCount2,1) != "#") {                 	
   nChar = 1;            	
   while (msc.substr(iCount1-nChar,1) != "#" && nChar <= iCount1) {                    	
    //alert(msc.substr(iCount1-nChar,1)+" -- "+nChar);                   	
    nChar++;                    	
   }            	
   e.value = iTexto.substr(0,iCount2-nChar+1);    	
  } 
  /*
  else {    	
   objCampoMascara.value = iTexto.substr(0,iCount1-1);    	
  }
  */
 }
}
</script>
Telefone: <input type="text" id="t1" onkeydown="MaskDown(this)" onkeyup="MaskUp(this,'(##) ####-####')"> (##) ####-####<br>
Data: <input type="text" id="t2" onkeydown="MaskDown(this)" onkeyup="MaskUp(this,'##/##/####')"> ##/##/####<br>
CEP: <input type="text" id="t3" onkeydown="MaskDown(this)" onkeyup="MaskUp(this,'#####-###')"> #####-###<br>
CPF: <input type="text" id="t4" onkeydown="MaskDown(this)" onkeyup="MaskUp(this,'###.###.###-##')"> ###.###.###-##<br>
CNPJ: <input type="text" id="t5" onkeydown="MaskDown(this)" onkeyup="MaskUp(this,'##.###.###/####-##')"> ##.###.###/####-##<br>
Placas de automóveis: <input type="text" id="t6" onkeydown="MaskDown(this)" onkeyup="MaskUp(this,'### ####')"> ### #####<br><br>
Aleatório 1: <input type="text" id="t7" onkeydown="MaskDown(this)" onkeyup="MaskUp(this,'|$-%  *& «##» .:. «##» (###) %-$|')" size="40"> |$-%  *& «##» .:. «##» (###) %-$|<br><br>
Aleatório 2: <input type="text" id="t8" onkeydown="MaskDown(this)" onkeyup="MaskUp(this,'<--| ##.### |-->')" size="40"> <--| ##.### |--><br><br><br><br>

t+

klonder · Abril 8, 2010

Não encontrei erro no script original... ei-lo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Máscaras para formulários - by Klonder</title>
</head>
<body>
<script type="text/javascript">
/*
Script desenvolvido por: Klonder
Postagem exclusiva em: http://www.forum.imasters.com.br
Versão 13.01.2010 - 20:05h;

Esse script poderá ser utilizado sem a necessidade de citação do autor.
Entretanto, não diga que o script é de sua autoria, pois o mesmo será postado nesse fórum, com a data precisa da publicação e com o nome do autor ao lado.
A capacidade em respeitar o trabalho do outro mostra o tipo de indivíduo que você realmente é.
*/

var trava = false;
var iCount1, iCount2, iCount, iTexto, nChar;
/*
iCount1 --> Comprimento da máscara no evento onkeydown (Referência para filtrar teclas de aderência!!!);
iCount2 --> Comprimento da máscara no evento onkeyup;
iTexto --> Texto atual na máscara, antes da função mascara() ser chamada com onkeyup;
nChar --> Variável controle;
*/

//Função chamada a partir do evento onkeydown;
function MaskDown(e) {
	if(trava == false) {
		//Armazenando a frase em uma variável, para ser utilizada durante o backspace;
		iTexto = e.value;
		
		//Comprimento da máscara no evento onkeydown;
		iCount1 = e.value.length;
		//Adicionando trava para evitar possível tecla de aderência:
		trava = true;
	}
}

//Função chamada a partir do evento onkeyup;
function MaskUp(e,msc) {
//Comprimento da máscara no evento onkeyup;
iCount2 = e.value.length;

//Verificando se o usuário inseriu novos caracteres, ou se apertou a tecla DELETE/BACKSPACE:

// -------------------- Caso 1: Inserção de novos caracteres --------------------
//Quantidade caracteres final (onkeydown) maior que a inicial (onkeyup) -> Houve inserção de caracteres;
if (iCount2 > iCount1) {
	
	//Recortando a máscara para filtrar possível tecla de aderência:
	e.value = e.value.substr(0,iCount1+1);
	//Verificando se o comprimento da máscara não é excedido;
	if(e.value.length > msc.length) {
		e.value = e.value.substr(0,msc.length);
	}
	//Antes de mais nada, verificar se a máscara já inicia com caracteres especiais e já inserí-los;
	if(iCount1 == 0) {
		//Contando o número de caracteres especiais (se porventura existirem):
		if (msc.substring(iCount1,iCount1+1) != "#") {
			nChar=1;
			//Contar as ocorrências de símbolos especiais, diferentes de: #, que iniciam a máscara:
			while (msc.substring(iCount1+nChar,iCount1+nChar+1) != "#" && nChar <= msc.length) {
				nChar++;	
			}
			e.value = msc.substring(0,iCount1+nChar) + e.value.substr(0,iCount1+1);
		} 
	//Se não iniciar com caracteres especiais:
	} else {
		//Verificando se existe caracteres especiais à frente do último caractere inserido:
		if (msc.substring(iCount1+1,iCount1+2) != "#") {
			var nChar=1;
			//Contar as ocorrências de símbolos especiais que sucedem o último caractere inserido;
			while (msc.substring(iCount1+nChar,iCount1+nChar+1) != "#" && nChar <= msc.length) {
				nChar++;	
			}
			e.value = e.value.substr(0,iCount1+1) + msc.substring(iCount1+1,iCount1+nChar);
		}
	}

// -------------------- Caso 2: Deleção de caracteres | Backspace --------------------
} else {	
	//Verificando se o caractere apagado é um símbolo especial ou não:
	if (msc.substr(iCount2,1) != "#") {	
		nChar = 1;
		//alert(msc.substr(iCount2,1));
		//Looping para percorrer os caracteres especiais retrocedentes:
		while (msc.substr(iCount1-nChar,1) != "#" && nChar <= iCount1) {
			//alert(msc.substr(iCount1-nChar,1)+" -- "+nChar);
			nChar++;	
		}
		//Apagando os caracteres retrocedentes, conforme o valor atribuído a nChar:
		e.value = iTexto.substr(0,iCount2-nChar+1);
	} /*else {
	//Recortando a máscara para filtrar possível tecla de aderência: Default: desabilitado.
	objCampoMascara.value = iTexto.substr(0,iCount1-1);
	}*/
}
//Liberando a trava para possibilitar novo evento onkeydown:
trava = false;
}

</script>
Telefone: <input type="text" id="t1" onkeydown="MaskDown(this)" onkeyup="MaskUp(this,'(##) ####-####')"> (##) ####-####
<br>Data: <input type="text" id="t2" onkeydown="MaskDown(this)" onkeyup="MaskUp(this,'##/##/####')"> ##/##/####
<br>CEP: <input type="text" id="t3" onkeydown="MaskDown(this)" onkeyup="MaskUp(this,'#####-###')"> #####-###
<br>CPF: <input type="text" id="t4" onkeydown="MaskDown(this)" onkeyup="MaskUp(this,'###.###.###-##')"> ###.###.###-##
<br>CNPJ: <input type="text" id="t5" onkeydown="MaskDown(this)" onkeyup="MaskUp(this,'##.###.###/####-##')"> ##.###.###/####-##
<br>Placas de automóveis: <input type="text" id="t6" onkeydown="MaskDown(this)" onkeyup="MaskUp(this,'### ####')"> ### #####

<br><br>Aleatório 1: <input type="text" id="t7" onkeydown="MaskDown(this)" onkeyup="MaskUp(this,'|$-%  *& «##» .:. «##» (###) %-$|')" size="40"> |$-%  *& «##» .:. «##» (###) %-$|

<br><br>Aleatório 2: <input type="text" id="t8" onkeydown="MaskDown(this)" onkeyup="MaskUp(this,'<--| ##.### |-->')" size="40"> <--| ##.### |-->

<br><br><br><br>Características principais:
<br>1. Filtro para evitar teclas de aderência;
<br>2. Flexibilidade para qualquer tipo de máscara, com qualquer tipo de caractere especial;
<br>3. Permite correção inteligente quando BACKSPACE for pressionado;
<br>4. Permite o uso de símbolos especiais em sequência, inclusive com espaço;
<br>5. Controlam a quantidade de símbolos na máscara, não havendo necessidade de inserir o "maxlength" em cada um dos campos de texto que forem criados (o "maxlength" pode ser usado a critério do desenvolvedor).
<br>6. Código-fonte reaproveitável para qualquer campo texto do formulário.
<br>7. Código-fonte comentado, para melhor compreensão do processo.
</body>
</html>

11closed · Abril 8, 2010

ola klonder

deu certo na hora de cadastrar o celular mais na pagina perfil que altera ñ esta dano certo, olha o codigo

echo "
<label>DDD e Telefone: </label><input type='text' id='t1' onkeydown='MaskDown(this)' onkeyup='MaskUp(this,'(##) ####-####');' name='telefone' value='".$linhas["telefone"]."'></input></br>
   <label>DDD e Celular: </label><input type='text' id='t2' onkeydown='MaskDown(this)' onkeyup='MaskUp(this,'(##) ####-####');'name='celular' value='".$linhas["celular"]."' /></br>

";

ali no onkeyup tem duas aspa simples onkeyup='MaskUp(this,'(##) ####-####');'

XD: Cheguei ao ponto 0, esta acontecendo a msm coisa que o script anterior que eu esta usando

sera que á alguma forma para fazer funcionar ?

t+

-rafael- · Abril 8, 2010

klonder

talvez aqui nao seja o lugar, mas percebi uma anomalia no seu script:

você digita algo no campo, e se você sai do campo e depois volta para o campo, ele apaga o q ta escrito, deixando alguns caracteres, no caso do telefone apaga tudo e deixa "((" no lugar.

klonder · Abril 8, 2010

você digita algo no campo, e se você sai do campo e depois volta para o campo, ele apaga o q ta escrito, deixando alguns caracteres, no caso do telefone apaga tudo e deixa "((" no lugar.

Testei e não encontrei problemas. Testei com tab progressivo, clicando em outro campo e depois voltando para o campo original... não vi nenhum erro...

Eu também não encontrei evento "onfocus" à primeira vista... eu utilizo os seguintes eventos:

onkeydown="MaskDown(this)" onkeyup="MaskUp(this,'##.###.###/####-##')";

deu certo na hora de cadastrar o celular mais na pagina perfil que altera ñ esta dano certo, olha o codigo

A intenção da máscara já é criar algo para não ser alterado. Se o cadastro do celular já deu certo, o problema não é com a máscara. Essa página perfil é a página PHP que pega os dados? Porquê você gostaria de modificar a entrada?

Vi que você está tentando imprimir o código com PHP... realmente tem necessidade disso, ou seja, imprimir com echo? Se a resposta for SIM, você deverá escapar as aspas corretamente, pois estará utilizando um número maior de aspas duplas e simples... Talvez o problema não seja no Javascript, mas sim na impressão via PHP.

-rafael- · Abril 8, 2010

você digita algo no campo, e se você sai do campo e depois volta para o campo, ele apaga o q ta escrito, deixando alguns caracteres, no caso do telefone apaga tudo e deixa "((" no lugar.

Testei e não encontrei problemas. Testei com tab progressivo, clicando em outro campo e depois voltando para o campo original... não vi nenhum erro...

Eu também não encontrei evento "onfocus" à primeira vista... eu utilizo os seguintes eventos:

onkeydown="MaskDown(this)" onkeyup="MaskUp(this,'##.###.###/####-##')";

testado no ie8 e no firefox 3.5.9.

os dois apresentaram o mesmo erro:

valor digitado no campo data: 15/10/2000

valor retornado apos passar pelo campo (tab): 15/10/200

valor retornado ao retornar para o campo (shift + tab): 15/10/2

achei muito estranho esse comportamento. mas gostei muito do script.

CORREÇÃO:

no firefox:

valor digitado no campo data: 15/10/2000

valor retornado apos passar pelo campo (tab): 1

valor retornado ao retornar para o campo (shift + tab): 1

klonder · Abril 9, 2010

Rapaiz... pior que agora vi o que acontece!

O problema é que eu não criei uma condição para o uso da tecla TAB! Eu nunca iria pensar nisso!

Segue o novo código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Máscaras para formulários - by Klonder</title>
</head>
<body>
<script type="text/javascript">
/*
Script desenvolvido por: Klonder
Postagem exclusiva em: http://www.forum.imasters.com.br
Versão 13.01.2010 - 20:05h;

Esse script poderá ser utilizado sem a necessidade de citação do autor.
Entretanto, não diga que o script é de sua autoria, pois o mesmo será postado nesse fórum, com a data precisa da publicação e com o nome do autor ao lado.
A capacidade em respeitar o trabalho do outro mostra o tipo de indivíduo que você realmente é.
*/

var trava = false;
var iCount1, iCount2, iCount, iTexto, nChar;
/*
iCount1 --> Comprimento da máscara no evento onkeydown (Referência para filtrar teclas de aderência!!!);
iCount2 --> Comprimento da máscara no evento onkeyup;
iTexto --> Texto atual na máscara, antes da função mascara() ser chamada com onkeyup;
nChar --> Variável controle;
*/

//Função chamada a partir do evento onkeydown;
function MaskDown(e) {
	if(trava == false) {
		//Armazenando a frase em uma variável, para ser utilizada durante o backspace;
		iTexto = e.value;
		
		//Comprimento da máscara no evento onkeydown;
		iCount1 = e.value.length;
		//alert(iCount1);
		//Adicionando trava para evitar possível tecla de aderência:
		trava = true;
	}
}

//Função chamada a partir do evento onkeyup;
function MaskUp(e,msc) {
//Comprimento da máscara no evento onkeyup;
iCount2 = e.value.length;

//Verificando se o usuário inseriu novos caracteres, ou se apertou a tecla DELETE/BACKSPACE:

// -------------------- Caso 1: Inserção de novos caracteres --------------------
//Quantidade caracteres final (onkeydown) maior que a inicial (onkeyup) -> Houve inserção de caracteres;
if (iCount2 > iCount1) {
	
	//Pequena correção para bug que estava ocorrendo com navegação com tecla TAB;
	//A tecla TAB não dispara nem keydown, fazendo com que iCount1 seja 0 e iCount2 o valor normal;
	//Por isso, vamos corrigir (Agradecimentos ao  -rafael- pela observação do bug) :-)
	if (iCount2-iCount1 > 1) {
		iCount1 = iCount2-1;
		e.select;
	} else {
		//Recortando a máscara para filtrar possível tecla de aderência:
		e.value = e.value.substr(0,iCount1+1);
		//Verificando se o comprimento da máscara não é excedido;
		if(e.value.length > msc.length) {
			e.value = e.value.substr(0,msc.length);
		}
		//Antes de mais nada, verificar se a máscara já inicia com caracteres especiais e já inserí-los;
		if(iCount1 == 0) {
			//Contando o número de caracteres especiais (se porventura existirem):
			if (msc.substring(iCount1,iCount1+1) != "#") {
				nChar=1;
				//Contar as ocorrências de símbolos especiais, diferentes de: #, que iniciam a máscara:
				while (msc.substring(iCount1+nChar,iCount1+nChar+1) != "#" && nChar <= msc.length) {
					nChar++;	
				}
				e.value = msc.substring(0,iCount1+nChar) + e.value.substr(0,iCount1+1);
			} 
		//Se não iniciar com caracteres especiais:
		} else {
			//Verificando se existe caracteres especiais à frente do último caractere inserido:
			if (msc.substring(iCount1+1,iCount1+2) != "#") {
				var nChar=1;
				//Contar as ocorrências de símbolos especiais que sucedem o último caractere inserido;
				while (msc.substring(iCount1+nChar,iCount1+nChar+1) != "#" && nChar <= msc.length) {
					nChar++;	
				}
				e.value = e.value.substr(0,iCount1+1) + msc.substring(iCount1+1,iCount1+nChar);
			}
		}
	}
// -------------------- Caso 2: Deleção de caracteres | Backspace --------------------
} else {	
	//Verificando se o caractere apagado é um símbolo especial ou não:
	if (msc.substr(iCount2,1) != "#") {	

		nChar = 1;
		//alert(msc.substr(iCount2,1));
		//Looping para percorrer os caracteres especiais retrocedentes:
		while (msc.substr(iCount1-nChar,1) != "#" && nChar <= iCount1) {
			//alert(msc.substr(iCount1-nChar,1)+" -- "+nChar);
			nChar++;	
		}
		//Apagando os caracteres retrocedentes, conforme o valor atribuído a nChar:
		e.value = iTexto.substr(0,iCount2-nChar+1);
	} /*else {
	//Recortando a máscara para filtrar possível tecla de aderência: Default: desabilitado.
	objCampoMascara.value = iTexto.substr(0,iCount1-1);
	}*/
}
//Liberando a trava para possibilitar novo evento onkeydown:
trava = false;
}

</script>
Telefone: <input type="text" id="t1" onkeydown="MaskDown(this)" onkeyup="MaskUp(this,'(##) ####-####')"> (##) ####-####
<br>Data: <input type="text" id="t2" onkeydown="MaskDown(this)" onkeyup="MaskUp(this,'##/##/####')"> ##/##/####
<br>CEP: <input type="text" id="t3" onkeydown="MaskDown(this)" onkeyup="MaskUp(this,'#####-###')"> #####-###
<br>CPF: <input type="text" id="t4" onkeydown="MaskDown(this)" onkeyup="MaskUp(this,'###.###.###-##')"> ###.###.###-##
<br>CNPJ: <input type="text" id="t5" onkeydown="MaskDown(this)" onkeyup="MaskUp(this,'##.###.###/####-##')"> ##.###.###/####-##
<br>Placas de automóveis: <input type="text" id="t6" onkeydown="MaskDown(this)" onkeyup="MaskUp(this,'### ####')"> ### #####

<br><br>Aleatório 1: <input type="text" id="t7" onkeydown="MaskDown(this)" onkeyup="MaskUp(this,'|$-%  *& «##» .:. «##» (###) %-$|')" size="40"> |$-%  *& «##» .:. «##» (###) %-$|

<br><br>Aleatório 2: <input type="text" id="t8" onkeydown="MaskDown(this)" onkeyup="MaskUp(this,'<--| ##.### |-->')" size="40"> <--| ##.### |-->

<br><br><br><br>Características principais:
<br>1. Filtro para evitar teclas de aderência;
<br>2. Flexibilidade para qualquer tipo de máscara, com qualquer tipo de caractere especial;
<br>3. Permite correção inteligente quando BACKSPACE for pressionado;
<br>4. Permite o uso de símbolos especiais em sequência, inclusive com espaço;
<br>5. Controlam a quantidade de símbolos na máscara, não havendo necessidade de inserir o "maxlength" em cada um dos campos de texto que forem criados (o "maxlength" pode ser usado a critério do desenvolvedor).
<br>6. Código-fonte reaproveitável para qualquer campo texto do formulário.
<br>7. Código-fonte comentado, para melhor compreensão do processo.
</body>
</html>

11closed · Abril 9, 2010

ola klonder

a pagina perfil é para pega os dados sim.

O motivo é poq se o usuario mudar de telefone, é para ele poder atualizar o novo telefone dele na pag perfil, e na hora da alteração eu gostaria que alteraçe do msm jeito que cadastra.

o erro deve ser nas aspas msm, mais tentei de varias formas ñ achei a correta, quando eu dexo echo ' '; e coloco onkeyup="MaskUp(this,'(##) ####-####')" o # fica como comentario tentei usar \' ou \" mais ainda ñ deu

sabe como deveria ser feito ?

li o que -rafael- falow sobre o tab. obrigado esse erro estava incomodano

tem outro que ñ sei se é possivel arrumar, quando você digita um numero normalmente se você selecionar o numero com o mause e digitar outro numero em cima do numero ja digitado tb sai errado 181) 818181818

t+

-rafael- · Abril 9, 2010

o q o 11closed falou procede.

a mascara ta quase ok.

porem, se você digita algo na data, vai para o campo de telefone e digita algo, ai volta para data (tab), ele bagunça tudo na data:

valor digitado na data: 11/11/1111

valor digitado no telefone: (11) 1111-1111

passa para o campo data (tab) e o valor fica: (11) 1

klonder · Abril 10, 2010

Por favor, testem o novo script.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Máscaras para formulários - by Klonder</title>
</head>
<body>
<script type="text/javascript">
/*
Script desenvolvido por: Klonder
Postagem exclusiva em: http://www.forum.imasters.com.br
Versão 09.04.2010 - 21:05h;

Esse script poderá ser utilizado sem a necessidade de citação do autor.
Entretanto, não diga que o script é de sua autoria, pois o mesmo será postado nesse fórum, com a data precisa da publicação e com o nome do autor ao lado.
A capacidade em respeitar o trabalho do outro mostra o tipo de indivíduo que você realmente é.
*/

var trava = false;
var iCount1, iCount2, iCount, iTexto, nChar;
function MaskDown(e) {
	if(trava == false) {
		iTexto = e.value;
		iCount1 = e.value.length;
		trava = true;
	}
}

function MaskUp(e,evt,msc) {
iCount2 = e.value.length;
var key_code = evt.keyCode ? evt.keyCode : evt.charCode ? evt.charCode : evt.which ? evt.which : void 0;
if (key_code == 9) {
		iCount1 = iCount2-1;
		e.select;
		
} else {
if (iCount2 > iCount1) {
	e.value = e.value.substr(0,iCount1+1);
	if(e.value.length > msc.length) {
		e.value = e.value.substr(0,msc.length);
	}
	if(iCount1 == 0) {
		if (msc.substring(iCount1,iCount1+1) != "#") {
			nChar=1;
			while (msc.substring(iCount1+nChar,iCount1+nChar+1) != "#" && nChar <= msc.length) {
				nChar++;	
			}
			e.value = msc.substring(0,iCount1+nChar) + e.value.substr(0,iCount1+1);
		} 
	} else {
		if (msc.substring(iCount1+1,iCount1+2) != "#") {
			var nChar=1;
			while (msc.substring(iCount1+nChar,iCount1+nChar+1) != "#" && nChar <= msc.length) {
				nChar++;	
			}
			e.value = e.value.substr(0,iCount1+1) + msc.substring(iCount1+1,iCount1+nChar);
		}
	}
} else if (iCount2 == iCount1) {
	e.value = e.value;
} else {	
	if (msc.substr(iCount2,1) != "#") {	

		nChar = 1;
		while (msc.substr(iCount1-nChar,1) != "#" && nChar <= iCount1) {
			nChar++;	
		}
		e.value = iTexto.substr(0,iCount2-nChar+1);
	}

}
trava = false;
}}
</script>
Telefone: <input type="text" id="t1" onkeydown="MaskDown(this)" onkeyup="MaskUp(this,event,'(##) ####-####')"> (##) ####-####
<br>Data: <input type="text" id="t2" onkeydown="MaskDown(this)" onkeyup="MaskUp(this,event,'##/##/####')"> ##/##/####
<br>CEP: <input type="text" id="t3" onkeydown="MaskDown(this)" onkeyup="MaskUp(this,event,'#####-###')"> #####-###
<br>CPF: <input type="text" id="t4" onkeydown="MaskDown(this)" onkeyup="MaskUp(this,event,'###.###.###-##')"> ###.###.###-##
<br>CNPJ: <input type="text" id="t5" onkeydown="MaskDown(this)" onkeyup="MaskUp(this,event,'##.###.###/####-##')"> ##.###.###/####-##
<br>Placas de automóveis: <input type="text" id="t6" onkeydown="MaskDown(this)" onkeyup="MaskUp(this,event,'### ####')"> ### #####

<br><br>Aleatório 1: <input type="text" id="t7" onkeydown="MaskDown(this)" onkeyup="MaskUp(this,event,'|$-%  *& «##» .:. «##» (###) %-$|')" size="40"> |$-%  *& «##» .:. «##» (###) %-$|

<br><br>Aleatório 2: <input type="text" id="t8" onkeydown="MaskDown(this)" onkeyup="MaskUp(this,event,'<--| ##.### |-->')" size="40"> <--| ##.### |-->

<br /><br /><br /><br />Características principais:
<br />1. Filtro para evitar teclas de aderência;
<br />2. Flexibilidade para qualquer tipo de máscara, com qualquer tipo de caractere especial;
<br />3. Permite correção inteligente quando BACKSPACE for pressionado;
<br />4. Permite o uso de símbolos especiais em sequência, inclusive com espaço;
<br />5. Controlam a quantidade de símbolos na máscara, não havendo necessidade de inserir o "maxlength" em cada um dos campos de texto que forem criados (o "maxlength" pode ser usado a critério do desenvolvedor).
<br />6. Código-fonte reaproveitável para qualquer campo texto do formulário.
</body>
</html>

11closed · Abril 12, 2010

ola klonder, desculpa a demora...

percebi q em todos os campos ñ pode ser digitado rapido

digitei rapido no campo data saiu assim 10110/1110

Ex: se você digitar no campo CEP 12345-678, se selecionar com o mause o numero 234 e digitar por cima o numero 111 ficaria assim 1115-6781 isso acontece em todos os outro campos

la no campo telefone

se selecionar o numero com o mause e digitar outro numero em cima do numero ja digitado ainda ta saindo errado 181) 818181818

porén se você digitar devagar e quando errar usar o Backspace o script funciona corretamente

quanto ao meu erro de php (aspas) ainda ñ consegui arrumar bixo.

sera que é melhor eu abri um post novo na sala de php ?

t+

William Bruno · Abril 12, 2010

Cara, por isso.. e por outros motivos, que eu uso máscaras com ER:

http://forum.imasters.com.br/index.php?/topic/357459-mascara/page__view__findpost__p__1363848

Ou se não, este plugin jQuery:

http://www.tidbits.com.br/plugin-de-mascara-para-jquery-masked-input

11closed · Abril 12, 2010

muito bom William Bruno

são recomendados esses scripts

estou usando os plugin JQuery

brigadão .. XD

t+

Arquivado

[Resolvido] mascara para input telefone

Recommended Posts

11closed 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

11closed 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

klonder 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

11closed 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

klonder 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

11closed 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

-rafael- 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

klonder 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

-rafael- 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

klonder 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

11closed 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

-rafael- 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

klonder 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

11closed 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

11closed 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeginiter - Orientação para Impressão

Ajuda com Extends e envio para o banco

Fixar div até atingir uma certa altura

Fóruns

Tempo Real

Informação importante