Character counter typed in a textarea

Question

I have this text box to be validated, should inform the amount of characters remaining and show these characters remaining in span, could help me?

<div class="novaLinha">
  <div>
    <label for="txtVoce">Faleme sobre você:</label>
  </div>
  <div>
    <textarea id="txtVoce" name="txtVoce" cols="40" rows="10"></textarea>
    <p><span id="carResTxtVoce" style="font-weight: bold;">400</span> caracteres restantes</p>
    <p class="aviso" id="avisoTxtVoce" style="display:none;">Este campo não pode ficar vazio!</p>
  </div>
</div>

Answer 1

You can do it like this:

var textarea = document.querySelector('textarea');
var info = document.getElementById('carResTxtVoce');
var limite = 400;
textarea.addEventListener('keyup', verificar);

function verificar(e) {
    var qtdcaracteres = this.value.length;
    var restantes = limite - qtdcaracteres;
    if (restantes < 1) {
        this.value = this.value.slice(0, limite);
        return info.innerHTML = 0;
    }
    info.innerHTML = restantes;
}

This way you inform the amount of characters missing and when they exceed the limit cut the excess.

Example: https://jsfiddle.net/bsy6m8b7/

You can too, like @Gabriel Rodrigues suggested you can join the attribute in the textarea HTML maxlength="400" it is better, and in this case it becomes simpler and it can only be so:

function verificar(e) {
    var qtdcaracteres = this.value.length;
    var restantes = limite - qtdcaracteres;
    info.innerHTML = restantes;
}

Answer 2

https://docs.angularjs.org/api/ng/directive/ngKeyup

<p>Typing in the input box below updates the key count</p>
<input ng-keyup="count = count + 1" ng-init="count=0"> key up count: {{count}}

<p>Typing in the input box below updates the keycode</p>
<input ng-keyup="event=$event">
<p>event keyCode: {{ event.keyCode }}</p>
<p>event altKey: {{ event.altKey }}</p>