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>
document.getElementById("cont").style.backgroundColor = "red"
?