Contar caracteres digitados

[Biel. 9]

Olá pessoal. Quero muito exibir dentro do (elemento p) a quantidade de caracteres que vai sendo digitado no campo de texto

<textarea  maxlength="100"  onkeyup="funcContador()"> </textarea>
<p id="idToto"></p>

<script>
  function funcContador(){

  var maximo = 100;

  var quantidadeDigitada = maximo.length;

  if (quantidadeDigitada ==0){
    document.getElementById('idToto').innerHTML = "";
  }

  if (quantidadeDigitada ==1){
    document.getElementById('idToto').innerHTML = quantidadeDigitada + " caracter digitado - máximo " + maximo;
  }

  if (quantidadeDigitada > 1){
    document.getElementById('idToto').innerHTML = quantidadeDigitada + " caracteres digitados - máximo " + maximo;
  }

  if (quantidadeDigitada >= maximo){
    document.getElementById('idToto').innerHTML = "Limite de caracteres atingido !";
  }

}

  </script>

 

[Marcos_imasters 288]

 function funcContador() {
      var maximo = 100;
      var textoDigitado = document.querySelector('textarea').value;
      var quantidadeDigitada = textoDigitado.length;

      if (quantidadeDigitada === 0) {
        document.getElementById('idToto').innerHTML = "";
      } else if (quantidadeDigitada === 1) {
        document.getElementById('idToto').innerHTML = quantidadeDigitada + " caracter digitado - máximo " + maximo;
      } else {
        document.getElementById('idToto').innerHTML = quantidadeDigitada + " caracteres digitados - máximo " + maximo;
      }

      if (quantidadeDigitada >= maximo) {
        document.getElementById('idToto').innerHTML = "Limite de caracteres atingido!";
      }
    }

 

[Biel. 9]

3 horas atrás, Marcos_imasters disse:

 function funcContador() {
      var maximo = 100;
      var textoDigitado = document.querySelector('textarea').value;
      var quantidadeDigitada = textoDigitado.length;

      if (quantidadeDigitada === 0) {
        document.getElementById('idToto').innerHTML = "";
      } else if (quantidadeDigitada === 1) {
        document.getElementById('idToto').innerHTML = quantidadeDigitada + " caracter digitado - máximo " + maximo;
      } else {
        document.getElementById('idToto').innerHTML = quantidadeDigitada + " caracteres digitados - máximo " + maximo;
      }

      if (quantidadeDigitada >= maximo) {
        document.getElementById('idToto').innerHTML = "Limite de caracteres atingido!";
      }
    }

 

Funcionou bem Marcos, obrigado. Um detalhe: E ao clicar fora do textarea ou em outro campo qualquer, como fazer a frase sumir? 

[wanderval 19]

Tá ai uma versão refatorada minha desse código, tava de bobeira achei interessante esses ifs ai, então decidi partir pra ignorancia e começar a destruir esse código kk,a constant é pq to mexendo com java ai surgiu a ideia rs.

 

HTML modificado

<div id="container">
  <textarea  maxlength="100"></textarea>
  <p id="idToto"></p>
</div>

JS modificado

function constant() {
  return {
    COUNTER_PLURAL_MESSAGE: " caracteres digitados - máximo ",
    COUNTER_SINGLE_MESSAGE: " caracter digitado - máximo ",
    LIMIT_MESSAGE: "Limite de caracteres atingido!"
  };
}

function characterCounter() {
  const max = 100;
  const container = document.getElementById('container');
  const [textArea, inputMessage] = container.children;
  const amountCharacterTyped = textArea.value.length;
  
  const selectMessage = () => amountCharacterTyped === 1
      ? constant().COUNTER_SINGLE_MESSAGE
      : constant().COUNTER_PLURAL_MESSAGE;

  if (amountCharacterTyped === 0){
    inputMessage.innerHTML = '';
  } else if (amountCharacterTyped > 0 && amountCharacterTyped < max) {
    inputMessage.innerHTML = amountCharacterTyped + selectMessage() + max;
  } else {
    inputMessage.innerHTML = constant().LIMIT_MESSAGE;
  }
}

function clear() {
  document.querySelector('#container p').inputMessage.innerHTML = "";
}

document.querySelector('textarea').addEventListener("keyup", characterCounter);
document.querySelector('textarea').addEventListener("focusout", clear);

 

JSbin: https://jsbin.com/yaduyigomo/edit?html,js,output