HTML como verifico a quantidade de caracteres digitados no <textarea> ?

[Swalls]

olá, obrigado pelas duvidas que todos tem tirado.

minha duvida é, como faço para mostrar ao usuário o numero de letras que ele já digitou e o limite? algo como: N-usado/N-limite

/* por exemplo uma textarea com 999 de limite, como informo o usuário a quantidade que ele já usou? ou onde posso achar essa variavel para imprimir ao lado da caixa de texto? */
<textarea name="" id="" cols="x" rows="x" placeholder="x" maxlength="999"></textarea>

 

[DiF]

@Swalls Podes usar o javascript ou jquery, para contar as linhas e travar quando chegar no mínimo.

exemplo:

 

HTML:

<textarea name="" id="txtArea" cols="x" rows="x" placeholder="x" maxlength="999"></textarea>
<div id="contador">999/999</div>

 

jquery:

$("#txtArea").keyup(function(){
    if($(this).val().length >= 999){
        $(this).val( $(this).val().substr(0, 999) );
    } else {
        $("#contador").text(999-$(this).val().length+"/999");
    }
});

 

Exemplo online:

https://jsfiddle.net/dife/wucengrv/2/

[Swalls]

9 horas atrás, DiF disse:

@Swalls Podes usar o javascript ou jquery, para contar as linhas e travar quando chegar no mínimo.

exemplo:

 

HTML:

<textarea name="" id="txtArea" cols="x" rows="x" placeholder="x" maxlength="999"></textarea>
<div id="contador">999/999</div>

 

jquery:

$("#txtArea").keyup(function(){
    if($(this).val().length >= 999){
        $(this).val( $(this).val().substr(0, 999) );
    } else {
        $("#contador").text(999-$(this).val().length+"/999");
    }
});

 

Exemplo online:

https://jsfiddle.net/dife/wucengrv/2/

ainda não estudei muito javascript e nada de jquery então não entendi, mas obrigado.

no exemplo online que voce me deu ele está contando depois que digita, como resultado fica sobrando 1 ao chegar ao final, e trava se digitar uma sequencia da mesma tecla.

[DiF]

@Swalls 

Citação

ele está contando depois que digita, como resultado fica sobrando 1 ao chegar ao final, e trava se digitar uma sequencia da mesma tecla.

A ideia era essa mesmo. Começa com 999/999  quando começa a digitar, vai reduzindo... quando chegar a 1, trava para não permitir mais.. afinal o limite é 999.

Mas se você faz questão que chegue em "zero"...  ficando por exemplo 0/999 e travar... basta trocar essa linha:

 

$("#contador").text(999-$(this).val().length+"/999");

 

por essa:

 

$("#contador").text(998-$(this).val().length+"/999");

 

Porém, ele vai sempre contar 1 a mais...mesmo chegando no zero.. só consegui fazer ele travar certo quando a contagem chegar a 1.