1

Montei um script para contar caracteres de um textarea em JavaScript, o código é esse:

<div>
    <p class="texto-cont">Restam <span id="cont">2.200</span> caracteres</p>
</div>

function limite_textarea(valor) {
    quant = 2200;
    total = valor.length;
    if(total <= quant) {
        resto = quant - total;
        document.getElementById("cont").innerHTML = resto;
    } else {
        document.getElementById("texto").value = valor.substr(0,quant);
    }
}

Preciso mudar o background do trecho "Restam 2.200 caracteres". Quando estiver em 2.200 gostaria que o background ficasse verde, laranja em 2000 e vermelho em 100 caracteres.

2
  • Já tentou document.getElementById("cont").style.backgroundColor = "red" ?
    – user129295
    Commented 25/10/2018 às 6:17
  • Como poderia aplicar nesse caso?
    – Rodrigo
    Commented 25/10/2018 às 14:12

1 Resposta 1

4

Basta utilizar um if ou operação ternária e utilizar a propriedade element.style.backgroundColor.

Exemplo:

/**
 * Captura os elementos
 */
const content = document.querySelector("#content")
const count = document.querySelector("#count")

/**
 * Utiliza o evento "input" para detectar novas alterações no textarea
 */
content.addEventListener("input", () => {

  /**
   * Captura o valor do atributo "maxlength" e 
   * calcula a quantidade restantes de caracteres
   */
  let maxLength = parseInt(content.getAttribute('maxlength'))
  let charRemaining = maxLength - content.value.length
  
  /* Converte o valor para pt-BR (Adiciona o "." em caso de milhar) */
  count.textContent = charRemaining.toLocaleString()
  
  /**
   * Utiliza uma operação ternária para verificar a quantidade de caracteres restantes
   * Se a qnt. restante for maior que 2190 => Verde, caso contrário realiza outra opção ternária
   * Se a qnt. restante for maior que 2180 e menor que 2190 => Laranja, caso contrário utiliza o vermelho
   */
  count.style.color = charRemaining > 2190 ? 'green' : charRemaining > 2180 ? 'orange' : 'red'
  content.style.backgroundColor = charRemaining > 2190 ? '#00800026' : charRemaining > 2180 ? '#ffa50026' : '#ff000026'
})

content.dispatchEvent(new Event("input"))
<div>
  <textarea id="content" rows="10" maxlength="2200"></textarea>
	<p class="texto-cont">Restam <span id="count"></span> caracteres</p>
</div>


Caso você utilize algum plugin para WYSIWYG ou similar, é necessário que esse permita que você "ouça" alguns eventos como keydown, keyup, input etc. Nem sempre isso irá acontecer. No exemplo abaixo, utilizarei o projeto emojionearea, porém poderá não funcionar com outros.

Exemplo comentando:

const maxLength = 2200
const emojionearea = $("#emojionearea1").emojioneArea({
  events: {
    /**
     * Informa a função callback do evento `keyup`
     * Caso queira utilizar outro evento, basta dá
     * uma olhada na documentação:
     * https://github.com/mervick/emojionearea#events
     */
    keyup: (editor) => { charRemaining(editor[0]) }
  }
})


function charRemaining(editor) {
  /**
   * Captura o valor do atributo "maxlength" e 
   * calcula a quantidade restantes de caracteres
   */
  let charRemaining = maxLength - editor.textContent.length

  /* Converte o valor para pt-BR (Adiciona o "." em caso de milhar) */
  count.textContent = charRemaining.toLocaleString()

  /**
   * Utiliza uma operação ternária para verificar a quantidade de caracteres restantes
   * Se a qnt. restante for maior que 2190 => Verde, caso contrário realiza outra opção ternária
   * Se a qnt. restante for maior que 2180 e menor que 2190 => Laranja, caso contrário utiliza o vermelho
   */
  count.style.color = charRemaining > 2190 ? 'green' : charRemaining > 2180 ? 'orange' : 'red'
  count.style.backgroundColor = charRemaining > 2190 ? '#00800026' : charRemaining > 2180 ? '#ffa50026' : '#ff000026'
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.1/emojionearea.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.1/emojionearea.min.css" rel="stylesheet"/>

<div class="row">
  <div class="span6">
    <textarea id="emojionearea1"></textarea>
  </div>
  
  <p class="texto-cont">Restam <span id="count">2.200</span> caracteres</p>
</div>

10
  • Funcionou em localhost, mas quando implementei o código em meu site, não funcionou, o servidor deu erro na declaração const. Eu alterei para var. ai o código conseguiu mostrar os caracteres, mas parou de contar e de mudar o background.
    – Rodrigo
    Commented 25/10/2018 às 14:11
  • O meu código está com o código input, mas o campo text area está representado por uma div, ai a contagem não é feita, pois a entrada de dados está sendo feita no div. O código div só aparece quando abro a página, no código do php ele não aparece, por isso não consigo definir a classe do div e declarar no javascript. Como faço para resolver?
    – Rodrigo
    Commented 25/10/2018 às 16:53
  • @Rodrigo , você está usando uma div com a propriedade contenteditable, é isso? Se for isso, basta fazer dessa maneira: codepen.io/valdeir2000/pen/LgMXeX?editors=1010 Commented 25/10/2018 às 20:58
  • O erro com const pode ter sido gerado devido a versão do navegador, para uma maior compatibilidade você pode usar o BabelJs Commented 25/10/2018 às 21:01
  • Valdeir, a div é contenteditable sim, porém, ela já tem uma class div definida, e não consigo encontrar o arquivo onde está esse código. No codepen o código que você informou funcionou, mas como eu não consigo encontrar o código para declarar o maxlength na div, eu declarei no código, ficando assim: codepen.io/rodson-rodrigo/pen/dgabNR Você vai ver que funciona, mas quando insiro no meu site, ele não funciona, e no depurador aparece o erro Uncaught TypeError: Cannot read property 'setAttribute' of undefined at
    – Rodrigo
    Commented 26/10/2018 às 4:38

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .