6

Tenho essa caixa de texto para ser validada, devendo informar a quantidade de caracteres restantes e mostrar esses caracteres restantes no span, poderiam me ajudar?

<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>

2 Respostas 2

3

Podes fazer isso assim:

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;
}

Dessa maneira vais informando a quantidade de caracteres em falta e quando excederem o limite corta o excesso.

Exemplo: https://jsfiddle.net/bsy6m8b7/

Também podes, como o @Gabriel Rodrigues sugeriu podes juntar no HTML do textarea o atributo maxlength="400" é melhor, e nesse caso fica mais simples e pode ser só assim:

function verificar(e) {
    var qtdcaracteres = this.value.length;
    var restantes = limite - qtdcaracteres;
    info.innerHTML = restantes;
}
6
  • 2
    +1, acredito que voce deva acrescentar um maxlength="400"no textarea para evitar que digitem mais caracteres e corta-los, fica mais natural. Commented 13/02/2016 às 20:27
  • 1
    @GabrielRodrigues obrigado. Em relação à tua sugestão isso já está lá. Na linha this.value = this.value.slice(0, limite);
    – Sergio
    Commented 13/02/2016 às 20:42
  • 2
    o maxlength do html intercepta mais rapido do que o keyup do javascript, entáo quando ele for digitar o caractere 400 a letra nem aparecera para que depois ela seja cortada. Commented 13/02/2016 às 20:44
  • 2
    @GabrielRodrigues pensei que estavas a sugerir via JavaScript. No HTML é bem melhor que via JavaScript. Juntei isso na resposta, obrigado.
    – Sergio
    Commented 13/02/2016 às 20:48
  • 1
    da pra deixar mais enxuto assim:jsfiddle.net/bsy6m8b7/1 Commented 13/02/2016 às 22:02
1

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>

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 .