33 replies to this topic

[cartoon]

ae pessoal to fazendo um formulario e gostaria de fazer um contador de caracteres tipo assim

aparece la encima da textarea

Maximo caracteres (250)
|---------------------------------------|
|abcdefg |
|---------------------------------------|

la no maximo de caracteres queria q apareça 243

comofazer isso ?

[LeoB]

Olá. Isso é javascript, mas dá uma olhada nesse código:

<script language="JavaScript">
function Contar(Campo){
document.getElementById("Qtd").innerText = 250-Campo.value.length
if((250-Campo.value.length)==0)
alert('Atenção, você atingiu o limite máximo de caracteres!');
}
</script>

<div id="Qtd">250</div>
<textarea onKeyUp="Contar(this)"></textarea>

[cartoon]

funciono PERFECT .. vlw mesmo

[pcmm]

como ficaria esse codigo para que a contagem de caracteres fosse ascendente em vez de descendente??

[LeoB]

Bastaria fazer algumas modificações simples:

<script language="JavaScript">
function Contar(Campo){
document.getElementById("Qtd").innerText = Campo.value.length
if(Campo.value.length==250)
alert('Atenção, você atingiu o limite máximo de caracteres!');
}
</script>

<div id="Qtd">0</div>
<textarea onKeyUp="Contar(this)"></textarea>

[cybermix]

muito obm o codigo mas isso é javascript

[Goku Jr]

o codigo e bom + depois que exibi a mensagem e o carinha clica no ok e vai tentar de novo digitar, ele continua digitandu normalmente !!!

[_MX_]

eu fiz o seguinte:

<script language="JavaScript">
function Contar(Campo){
	if(Campo.value.length>100){
  alert('Atenção, você atingiu o limite máximo de caracteres!');
  frmCadastrar.mensagem.value=frmCadastrar.mensagem.value.substring(0,100);
	}
	document.getElementById("qtd").innerText =100-Campo.value.length;
}
</script>

quando ultrapassa os caracteres permitidos exibe a mensagem e apaga o ultimo caractere

[gabows888]

galera, o meu tah bem parecido com o seus aki, mas nao sei se vcs perceberam, mas se o cara dah BackSpace ele nao aumenta (pelo menos no meu script) o valor de caracteres q ainda cabem...ele se ajusta qdo o cara digita algo novamente, mas se o cara aperta BackSpace e para de digitar, ele fica errado...se alguem souber como arrumar...
Eu tentei assim:
...
rest=formulario.campoResto.maxlength-formulario.campoResto.value.length;
if(event.keyPress==8){
formulario.campoResto.value=rest+1;
}
---
mas ainda nao deu certo...sei lah, pela logica nao precisaria fazer isso, pois eu fiz assim:

<textarea name="texto"id="texto"cols="45"rows="10"maxlength="150"onkeypress="contador(this)"></textarea>
<input type="button"value="Enviar"onclick="envia()"><br>
<input type="text"name="resto">
</form>
<script language="javascript">
function contador(texto){
resto=texto.maxlength-texto.value.length;
if(event.keyPress==8){
contatoForm.resto.value=resto+1;
}
contatoForm.resto.value=resto;
if(resto<=0){
alert("Limite do tamanho do texto!");
contatoForm.texto.focus();
}
}
</script>

pela logica o 'onkeypress' deveria incluir o BackSpace, nao?

[Celão]

po galera... usando aquele script do LeoB ou o do _MX_ (que não funcionou como deveria) o usuário digita 250 caracteres. Quando ele digita o 251 aparece a mensagem de erro, mas se ele der ok e continuar digitando ele vai aceitar e vai contanto -1, -2, -3...

Como faz pra travar e não deixar escrever de jeito nenhum se houver 250 letras???


valeu...

[Felipe T.]

<script language="JavaScript">
function trava(Campo,maxm){
document.getElementById("Qtd").innerText = Campo.value.length
if(Campo.value.length >= maxm)alert("Fim do campo")

}
</script>
<form name="contatoForm">
<div id="Qtd">0</div>
<textarea name="texto" onKeyUp="trava(this,10)" onKeyDown="trava(this,10)"></textarea>
</form>

-----------------------------------------------------------
esse vai dar certo!

Edição feita por: Felipe T., 15/07/2004, 11:25.

[Felipe T.]

iii... acho q falhou.. puts... ele soh dá mais uma travinha...

[LeoB]

Não tenho certeza, mas acho que se usarmos o event.keyCode ele cancela a tecla pressionada. Mas aí tem que ser no evento onKeyDown. Se não funcionar, tentem no evento onKeyPress.

<script language="JavaScript">
function Contar(Campo){
  document.getElementById("Qtd").innerText = 250-Campo.value.length
  if((250-Campo.value.length) <= 0){
     alert('Atenção! Você atingiu o limite máximo de caracteres!');
     event.keyCode = 0;
  }
}
</script>

<div id="Qtd">250</div>
<textarea onKeyDown="Contar(this)"></textarea>

Edição feita por: LeoB, 15/07/2004, 12:10.

[gabows888]

tenta issu aki:

<form name="contatoForm"action="">
Nome: <input type="text"name="nome"id="form"><br>
Assunto: <input type="text"name="assunto"id="assunto"><br>
<textarea name="texto"id="texto"cols="45"rows="10"maxlength="150"onKeyPress="contador(this)"></textarea>
<input type="button"value="Enviar"onClick="envia()">
<input type="button"value="Apagar"onClick="reset(this.form);contatoForm.resto.value=contatoForm.texto.maxlength"><br>
Caracteres Restantes: <input type="text"name="resto"value="150">
</form>
<script language="javascript">
function contador(texto){
resto=texto.maxlength-texto.value.length;
contatoForm.resto.value=resto;
if(resto<1){
alert("Limite do tamanho do texto!");
texto.value=texto.value.substring(0,texto.maxlength-1);
contatoForm.texto.focus();
}
}
function envia(){
resto=contatoForm.texto.maxlength-contatoForm.texto.value.length;
contatoForm.resto.value=resto;
nome=contatoForm.nome.value;
assunto=contatoForm.assunto.value;
texto=contatoForm.texto.value;
}
</script>

[_MX_]

fiz uma função que mesmo se você colar caracteres pelo menu edit ele conta quando sair o foco do campo.

function contarCaracteres(){
  var total=20;
  var digitado=frmMensagem.mensagem.value.length;
  if(digitado>total){
  	alert('Número máximo de caracteres excedido.');
  	frmMensagem.mensagem.value=frmMensagem.mensagem.value.slice(0,total) //exibe os 20 primeiros caracteres
  }
  digitado=frmMensagem.mensagem.value.length;
  var restante=total-digitado;
  document.getElementById('caracteres').innerText=restante.toString() + ' restantes';//exibe o texto na div
}

<textarea name="mensagem" rows="8" id="mensagem" onKeyUp="contarCaracteres()" onChange="contarCaracteres()"></textarea>
<div id="caracteres">20 restantes</div>

só vai na gambiarra mesmo

Edição feita por: _MX_, 18/07/2004, 11:45.