Ir para conteúdo

POWERED BY:

Arquivado

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

Juliano Gomes

[Resolvido] Formatar input telefone

Por , em Javascript

Recommended Posts

Juliano Gomes    0

Juliano Gomes
Postado

caros colegas, desenvolvo em asp, e uso uma função genéria em javascript para formatar campos. gostaria de utilizar essa função para formatar o campo Telefone na seguinte mascara: (##)####-####

 

O problema é que se eu fizer o que está no response abaixo, me será retornado a seguinte mascara: 0#0)0#0#0#0#0

 

 

 

Response.Write("<input name='txtFone1' type='text' id='txtFone1' size='13' maxlength='13' onKeyPress='formata(this,""(##)####-####"")'/>")

 

 

// formata mascara em componentes de um form, ex: <input type="text" name="edtCPF" size="10"  onKeyPress='formata(this,""##/##/####"")'>
function formata(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);
  }
}

 

Alguem poderia me dar uma ajuda com isso?

 

Abraços

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno Grasselli    1

Bruno Grasselli
Postado

Hum, não sei se entendi a lógica dessa máscara... mas estou com um palpite de que é porque sua máscara não começa com #.

 

Tenta trocar por isso:

 

// formata mascara em componentes de um form, ex: <input type="text" name="edtCPF" size="10"  onKeyPress='formata(this,""##/##/####"")'>
function formata(src, mask)
{
  var i = src.value.length;
  var saida = "#";
  var texto = mask.substring(i)
if (texto.substring(0,1) != saida)
  {
	src.value += texto.substring(0,1);
  }
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno Grasselli    1

Bruno Grasselli
Postado

Mas no primeiro keyPress o texto não está em branco?

 

Qualquer coisa você pode fazer um tratamento a parte para esse primeiro caractere.

 

Edit. Mesmo que o código funcione, não seria melhor você fazer essa formatação são após a digitação completa?

Se eu fosse fazer uma formatação como essa eu deixaria o cara digitar e, depois que ele terminasse eu formataria.

Porque você pode ter problemas com ctr + c + ctr + v ou então quando o usuário selecionar algo digitado anteriormente.

 

Ou então fazer desse jeito mesmo mas depois executar uma outra função no onBlur que formate por inteiro, pro caso do cara ter copiado e colado ou selecionado um texto do auto completar.

Compartilhar este post

Link para o post
Compartilhar em outros sites

klonder    14

klonder
Postado

Acabei de fazer um código aqui copiando o seu modelo de uso de máscaras...

Para dar uma incrementada, resolvi generalizar para CPF, Data, Telefone, CNPJ, etc etc etc...

 

Ficou até bonzinho!

<html><head>
<title>Máscaras em campos de texto</title>

<script type="text/javascript">
//Script by klonder (em uma noite inspirada!!!)

function mascara(l,m,i){
//l: local do objeto --> this;
//m: máscara;
//i: caractere inicial (posição zero da máscara;
	
				  if (l.value.length <= m.length) {
	 	//Verificando se foi passado o parâmetro inicial "i":
		if (l.value.length == 1 && i != ""){
			l.value = i+l.value;	
		} 
		if (m.substr(l.value.length,1) == "#") {l.value = l.value;}
		if (m.substr(l.value.length,1) == "/") {l.value = l.value+"/";}
		if (m.substr(l.value.length,1) == "-") {l.value = l.value+"-";}
		if (m.substr(l.value.length,1) == ".") {l.value = l.value+".";}
		if (m.substr(l.value.length,1) == "(") {l.value = l.value+"(";}
		if (m.substr(l.value.length,1) == ")") {l.value = l.value+")";}
		if (m.substr(l.value.length,1) == " ") {l.value = l.value+" ";}
	} else {
		l.value = l.value.substr(0,m.length);
	}
} 
</script>

</head>
<body onLoad="document.form1.data.focus();">
<form name="form1" action="" method="post">
Data: <input type="text" name="data" value="" onKeyUp='mascara(this,"##/##/####","")'>
<br>CPF: <input type="text" name="cpf" value="" onKeyUp='mascara(this,"###.###.###-##","")'>
<br>Telefone: <input type="text" name="telefone" value="" onKeyUp='mascara(this,"(##) ####-####","(")'>
<br>
<input type="submit" value=" Enviar ">
</form>
</body>
</html>

-- Post editado --

Acabei de dar uma melhorada no código acima... para quem preferir, estou disponibilizando o código novo:

<html><head>
<title>Máscaras em campos de texto</title>

<script type="text/javascript">
//Script by klonder (em uma noite inspirada!!!)

function mascara(l,m,i){
//l: local do objeto --> this;
//m: máscara;
//i: caractere inicial (posição zero da máscara;

var iCount = l.value.length;

//Digite os símbolos especiais que permanecerão em seus locais corretos:
var simbolosEspeciais = "()/-.";	
	
	if (iCount < m.length) {
		 //Verificando se foi passado o parâmetro inicial "i":
		if (iCount == 1 && i != ""){
			l.value = i+l.value;	
		} else {
		
			if (simbolosEspeciais.indexOf(m.substr(iCount,1)) != -1) {
				l.value = l.value+m.substr(iCount,1);
			
				if (m.substr(iCount+1,1) == " ") {
				l.value = l.value+" ";
				}
			}
		
			if (m.substr(iCount,1) == " ") {
				l.value = l.value+" ";
			}
		}

	} else {
		l.value = l.value.substr(0,m.length);
	}
} 
</script>

</head>
<body>
<form name="form1" action="" method="post">
Data: <input type="text" name="data" value="" onKeyUp='mascara(this,"##/##/####","")'>
<br>CPF: <input type="text" name="cpf" value="" onKeyUp='mascara(this,"###.###.###-##","")'>
<br>CNPJ: <input type="text" name="cnpj" value="" onKeyUp='mascara(this,"##.###.###/####-##","")'>
<br>Telefone: <input type="text" name="telefone" value="" onKeyUp='mascara(this,"(##) ####-####","(")'>
<br>CEP: <input type="text" name="cep" value="" onKeyUp='mascara(this,"#####-###","")'>
<br>Texto qualquer: <input type="text" name="texto1" value="" onKeyUp='mascara(this,"### ### ###","")'>

<br>
<input type="submit" value=" Enviar ">
</form>
</body>
</html>

-- Post editado --

Tem um código que ainda é menor que o meu... mas ele não formata telefone com a máscara: (##) ####-#### ou termos similares que começam com algo diferente de #. No entanto, para quem se interessar, segue o link:

 

O link é: http://forum.imasters.com.br/index.php?showtopic=202473

Compartilhar este post

Link para o post
Compartilhar em outros sites

Juliano Gomes    0

Juliano Gomes
Postado

Acabei de fazer um código aqui copiando o seu modelo de uso de máscaras...

Para dar uma incrementada, resolvi generalizar para CPF, Data, Telefone, CNPJ, etc etc etc...

Klonder, valeu meu brother!

 

Abraços a todos!

Compartilhar este post

Link para o post
Compartilhar em outros sites

klonder    14

klonder
Postado

Klonder, só mais uma coisa... como seria a mascara de um campo(decimal 15,2) de uma tabela do Mysql???

 

abraços!

Poderia dar um ou dois exemplos por favor?

É que eu não compreendi se decimal é uma palavra, ou se podem ser números (caso você esteja querendo dar um split depois). Fiquei em dúvida.

 

Ex: (10,1 15,2) ou apenas (15,2) etc.

 

Nesse caso, por ser tabela, os valores serão fornecidos pelo banco de dados e não inseridos pelo usuário, correto?

Existe algum padrão de casas decimais? Ex: (15,2) ou (15,20) ou (150,200) etc ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Juliano Gomes    0

Juliano Gomes
Postado

Poderia dar um ou dois exemplos por favor?

Ex: tenho uma tabela chamada "valores", e nela tenho o campo "valor DECIMAL, 15,2", que irá armazenar valores monetários

 

dae quando vou inserir um valor nessa tabela:

 

valor: <input type="text" name="valor" value="13.500,52" onKeyUp='mascara(this,"","")'>

 

 

É que eu não compreendi se decimal é uma palavra, ou se podem ser números (caso você esteja querendo dar um split depois). Fiquei em dúvida.

 

Ex: (10,1 15,2) ou apenas (15,2) etc.

R: sim, sao numeros, monetários

 

Nesse caso, por ser tabela, os valores serão fornecidos pelo banco de dados e não inseridos pelo usuário, correto?

penso que esses valores sao inseridos pelo usuario atraves de um form, e validados pelo banco de dados, mas antes da validação gostaria de formatar esses valores monetários

 

Existe algum padrão de casas decimais? Ex: (15,2) ou (15,20) ou (150,200) etc ?

padrão Mysql. o que eu uso é o 15,2

 

 

 

Um forte abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jonathan Queiroz    1

Jonathan Queiroz
Postado

Eu tenho a seguinte função:

function CalcTotals() {
var p1_Float  = parseFloat(document.Form1.p1.value);
var q1_Float  = parseFloat(document.Form1.q1.value);
var resultado=p1_Float*q1_Float
resultado = Math.round(resultado*100)/100
if (parseInt(resultado)==resultado){
resultado+=".00"
}else if(parseInt(resultado*10)/10==resultado){
resultado+="0"
}
document.Form1.SubTotal1.value = resultado;
}
Usei ela recentemente para resolver uma dúvida em outro fórum...

Você pode usar essa função no evento onblur do seu campo !

Compartilhar este post

Link para o post
Compartilhar em outros sites

Juliano Gomes    0

Juliano Gomes
Postado

Jonathan, valeu brother, mas nao é isso ainda que estou buscando...

 

você conhece a função FormatNumber() do asp? ( http://www.devguru.com/technologies/vbscript/13926.asp )

 

essa função funciona perfeitamente quando voce está recuperando um campo decimal 15,12 Basta fazer assim:

 

Response.Write(FormatNumber(12345)) 'O resultado de saída será: 12,345.00

porém eu precisava adaptar uma mascara parecida com a ideia do FormatNumber no script criado por nosso amigo Klonder para poder utiliza-lo no evento onKeyUp do input

 

Estou tentando fazer algo aqui, mas alguém poderia dar essa força caso soubesse como fazer?

 

abraços a todos!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Juliano Gomes    0

Juliano Gomes
Postado

ta bom, confesso que nao consegui fazer de outra maneira a nao ser que utilizando uma nova função...

 

<!-- http://javascript.internet.com/forms/currency-format.html -->
// exemplo: <input type=text name=input2 size=10 onBlur="this.value=formatCurrency(this.value);">
function formatCurrency(num) {
	num = num.toString().replace(/\$|\,/g,'');
	if(isNaN(num))
	num = "0";
	sign = (num == (num = Math.abs(num)));
	num = Math.floor(num*100+0.50000000001);
	cents = num%100;
	num = Math.floor(num/100).toString();
		if(cents<10)
		cents = "0" + cents;
		for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
		num = num.substring(0,num.length-(4*i+3))+'.'+
		num.substring(num.length-(4*i+3));
		return (((sign)?'':'-') + num + ',' + cents);
}

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito