3

Estou escrevendo esse código que é para contar a quantidade de caracteres restantes em uma textarea. De início pareceu muito simples e tem bastante documentação na internet. Porém eu percebi que quando copio e colo algum texto na textarea, o total de caracteres remanescentes é positivo, ou seja, ainda posso digitar. Porém, não é isso que acontece. Além de não permitir digitar mais caracteres, até mesmo eu apagando alguns dos caracteres com o backspace eu não consigo mais digitar. Por exemplo, se o texto terminar em "bola" eu não consigo escrever "bolar" e se eu apagar pra apenas "bol" (retirando o "a") eu não consigo mais escrever "bola".

Pra ficar claro, o código abaixo funciona em condições normais de temperatura e pressão, porém quando ocorre um "paste" ele fica com o comportamento anômalo, que é apresentar a quantidade de caracteres restantes, por exemplo 200, e não permite mais inserção de dados. Segue o código que fiz:

    $("#textAreaComplemento").bind("keyup change", function (e) {
        calculaCaracteresRestantes();
    });

    function calculaCaracteresRestantes() {
        if ($('#textAreaComplemento').val() == undefined) { return false; }

        var text_length = $('#textAreaComplemento').val().length;
        var text_remaining = text_max - text_length;
        $('#textarea_feedback').html(text_remaining);

        return true;
    }

qualquer sugestão do que pode ser será bem vinda.

EDIT: Pra reproduzir, basta copiar o código que está no comentário do html desse fiddle http://jsfiddle.net/sLr8co1n/4/. Cole o código até o máximo que puder na textarea e depois tente digitar.

5
  • Funciona bem para mim... Podias juntar o evento paste nesse .bind(). Dá uma olhada aqui e dá um exemplo do comportamento errado que obtêns: jsfiddle.net/n78n5vww
    – Sergio
    Commented 4/02/2015 às 21:45
  • @sergio, interessante, eu coloquei o maxlength no seu código pra ficar igual ao meu. Está funcionando legal, porém faça o seguinte: se eu copiar apenas uma linha do notepad com espacos em branco e tudo mais e colar até atingir a quantidade máxima, o comportamento fica ok. Porém eu testei copiar um texto com linhas, parágrafos e espaços em branco e aparece o comportamento que descrevi. Segue o fiddle atualizado. A massa que eu testei está no trecho de html comentada no fiddle. jsfiddle.net/sLr8co1n/4 Commented 4/02/2015 às 23:19
  • estou desconfiando de malditos caracteres especiais... Commented 4/02/2015 às 23:20
  • não funciona, @qmechanic73. O atributo maxlength é necessário nesse caso. Pra reproduzir, basta copiar o código que está no comentário do html desse fiddle jsfiddle.net/sLr8co1n/4. Cole o código na textarea até o máximo que puder e depois tente digitar. Commented 5/02/2015 às 1:19
  • Por que motivo o maxlength é necessário? Se você controla o tamanho do conteúdo via script?
    – Moykn
    Commented 29/10/2015 às 16:12

2 Respostas 2

1

Você poderia simplesmente usar a propriedade maxlength que já faz esse limite pra você.

var textarea=document.getElementById("textarea");
var caracteresRestantes=document.getElementById("caracteresRestantes");
textarea.oninput=function(e){
    caracteresRestantes.innerHTML=(100-this.value.length);
}
<textarea maxlength="100" id="textarea"></textarea>
<div id="caracteresRestantes">100</div>

4
  • Oi, @matheus, eu fiz isso só não comentei na pergunta, o problema, porém, não é esse: nesse fiddfle use aquele trecho comentado de html e cole na text área o máximo possível que você vai perceber o problema =) jsfiddle.net/sLr8co1n/4 Commented 4/02/2015 às 23:21
  • @P8Q percebi agora, mas o doido é que no internet explorer funciona perceitamente, uma coisa que notei é que no chrome é como se uma quebra de linha valesse 2 caracteres não sei porque.... Commented 5/02/2015 às 15:50
  • Uma quebra de linha no windows equivale a 2 caracteres \r\n (carriage return e line feed). Acho que os browsers baseados em Webkit estão com esse problema(Também acontece no Opera).
    – Moykn
    Commented 29/10/2015 às 16:05
  • Sabe dizer como faço condições no textarea? Poe exemplo, se placa já existir emitir um alerta e placa já cadastrada, isso no textarea, porque vão ser várias placas.
    – André
    Commented 27/01/2023 às 12:29
1

Respondi uma questão semelhante aqui:

https://pt.stackoverflow.com/a/95284/2124

Ao que parece quando se usa um texarea com o atributo maxlength definido há um erro na contagem de caracteres. Quem está impedindo que você insira mais caracteres é o próprio texarea, baseado no maxlength que informou na tag

<textarea maxlength="200">

Neste Fiddle eu mostro uma forma de implementar o comportamento desejado: http://jsfiddle.net/tv0rrv0r/1/

Utilizando para isso o evento "input" que também será disparado quando texto for colado no textarea.

1
  • Sabe dizer como faço condições no textarea? Poe exemplo, se placa já existir emitir um alerta e placa já cadastrada, isso no textarea, porque vão ser várias placas.
    – André
    Commented 27/01/2023 às 12:29

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 .