Exemplo de javascript contador de caracteres

A função java-script abaixo efetua a contagem de caracteres de um campo textarea (poderia ser um input text, ok?).

function contador(evt){
	//tratamento event p/ diversos browsers
	evt = evt || window.event;
	var targ = evt.target || evt.srcElement;
	if (targ.nodeType == 3) // defeat Safari bug
	targ = targ.parentNode
	//##end event
			
	//antigo codigo
	//document.forms[0].caracteres.value=document.forms[0].texto.value.length
				
	//[update] novo - sugestão no comments - Dicas de Excel
	//agora está generico. ser houver mais de um textarea, o js atende.
	document.forms[0].caracteres.value=targ.value.length
}

A função contador()  é acionada pelos eventos  onkeydown onkeyup do campo “texto” do form.

<!--antigo
<TEXTAREA onkeydown=contador() onkeyup=contador() name=texto></TEXTAREA>
-->
<!--[update] novo - sugestão no comments - Dicas de Excel-->
<TEXTAREA onkeydown=contador(event) onkeyup=contador(event) name=texto></TEXTAREA>

Desta forma, capturamos o tamanho da string informada pela propriedade value.length. e atribuímos o tamanho no  campo input pra exibir para o usuário.

Veja o exemplo rodando em ContadorDeCaracteres.htm

Anúncios

7 Comentários

Arquivado em Browser, HTML, JavaScript/Afins

7 Respostas para “Exemplo de javascript contador de caracteres

  1. Olá colega, essa é uma boa dica. Para deixar a função contador mais genérica, seria possível passar event como argumento e usar event.target para calcular a quantidade de caracteres, em vez de forms[0].texto . Assim você poderia usar a mesma função para diferentes caixas de texto

  2. Alex Camargo

    Olá amigo,
    Ótimo post, porém como ficaria contando os registros de maneira decrescente de maneira parametrizável?

    God bless!

    • Obrigado Alex, vc pode fazer um contador decrescente usando uma variável com o limite que vc quer no seu textarea.
      Segue o exemplo:

      function contador(evt, limite){
      	//tratamento event p/ diversos browsers
      	evt = evt || window.event;
      	var targ = evt.target || evt.srcElement;
      	if (targ.nodeType == 3) // defeat Safari bug
      	targ = targ.parentNode
      	//##end event
      
      	var restante = parseInt(limite) - targ.value.length;
      				
      	if (parseInt(restante)>=0){
      		document.getElementById('caracteres').value= parseInt(limite) - targ.value.length;
      		return true;
      	}
      	return false;
      				
      }
      

      Note a subtração do valor de limite com o digitado pelo usuário na linha:

      document.getElementById('caracteres').value= parseInt(limite) - targ.value.length;
      

      A chamada da função ficaria assim:

      <TEXTAREA onkeydown=contador(event, 100) onkeyup=contador(event,100) name=texto rows="4" cols="50"></TEXTAREA>
      

      Obs. só estou fazendo um exemplo simples da subtração, vc terá que fazer um if pra número negativo, pode usar parseInt(limite) >=0 e também remover a digitação extra quando o usuário tenta digitar a mais com substring(0,limite).

  3. Fernando

    Quando dá enter para ir para próxima linha ele conta + 1 caracter.
    Como seria sem contar esse caracter?

    • Acredito que o enter tbem é válido na contagem de caractere, porém se vc quiser excluir o enter, basta no trecho que atribui a contagem tratar no if

      if( event.keyCode !=13 ) { <!-- 13 é o código do Enter -->  
         document.forms[0].caracteres.value=targ.value.length;
      }
      

      Bons códigos!!!
      []s

  4. Pingback: Javascript contador de caracteres - Achei no Blog

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s