Neste artigo aprenderemos a lidar com um tipo de elemento de formulário que possui características diferentes dos campos de texto comuns: a textarea.

Sim, nós já fazemos a validação de um campo textarea em nossa função JavaScript, mas existe um detalhe muito importante que não estamos cuidando.

O elemento HTML textarea não possui o atributo ‘maxlength’, comum aos campos do tipo texto. Sendo assim este elemento representa um certo perigo para o desenvolvedor, já que teoricamente um usuário poderia colar dentro de um campo como este centenas ou até milhares de bytes, tentando assim enviar uma carga excessiva de dados para o nosso servidor.

Se contarmos com a possibilidade de gravarmos os dados recebidos em uma base de dados – e toda a gravação em base de dados gera ocupação de espaço em disco – corremos o risco de ver a conta de hospedagem de nosso website crescer vertiginosamente graças ao uso mal-intencionado de uma textarea.

Outro cuidado que devemos ter é que, como a textarea aceita normalmente um número extenso de caracteres, é interessante podermos informar ao usuário quantos caracteres ele já digitou, ou melhor ainda, quantos caracteres ele ainda pode digitar.

Primeiramente então criaremos uma textarea com um campo de texto ao lado. Em nossa textarea colocaremos um gatilho onKeyUp que chamará a função que faz a contagem de caracteres. Adicionaremos um campo do tipo texto que servirá unicamente para exibirmos quantos caracteres nosso usuário ainda pode digitar. Como este campo terá uma função meramente informativa, adicionaremos à ele o atributo HTML ‘disabled’, que torna o campo “desabilitado”, ou seja, este campo não pode ser modificado pelo usuário.

Observe o código HTML:

<textarea name="comentarios" rows="10" cols="20" onKeyUp="vigiaTextarea();" />   <input type="text" disabled="disabled" name="contagem" size="3" value="50" />

Vejamos como seria nossa lógica para limitarmos o uso deste campo e ao mesmo tempo manter o usuário informado de quantos caracteres ele ainda pode digitar:

1. Definimos um limite de caracteres (que obviamente deve ser o mesmo “declarado” em nosso campo de texto, neste exemplo 50)
2. À cada caractere digitado verificamos se o comprimento total do que foi digitado na textarea ultrapassa nosso limite
3. Em caso positivo, faremos algo parecido com o que fizemos em nossa funções de máscara de data e telefone: faremos com que o valor da textarea seja uma substring dele mesmo menos a diferença do seu comprimento pelo limite, removendo quaisquer caractere(s) extra(s).
4. Em caso negativo, atualizamos o campo de texto de forma que seu valor seja o a subtração do comprimento total do que foi digitado pelo limite.

Nosso código então ficará assim:

function vigiaTextarea()
{
    limite = 50;
    myTextArea = document.forms[0].comentarios;
    myTextField = document.forms[0].contagem;

    if (myTextArea.value.length > limite) {
        myTextArea.value = myTextArea.value.substr(0, (myTextArea.value.length - (myTextArea.value.length - limite)));
    } else {
        myTextField.value=(limite - myTextArea.value.length);
    }
}

Linha 3: Definimos uma variável que guardará o limite de caracteres.

Linhas 4 e 5: Armazenamos a textarea e o campo texto em variáveis, para que não precisemos ficar digitando a estrutura DOM o tempo todo.

Linha 7: Testamos se o comprimento total do que foi digitado na textarea (propriedade length do valor dela) excede nosso limite

Linha 8: Em caso positivo, fazemos com que o valor da textarea seja transformado em uma substring dele mesmo. Esta substring irá do primeiro caractere (0) até o caractere \’x\’, onde \’x\’ é a subtração do comprimento do valor digitado pelo limite. Desta forma, conforme o comentário do leitor Durval Eduardo Pacheco Garcia, impedimos o ato de copiar e colar conteúdo para dentro de nossa textarea.

Linhas 9 e 10: Em caso negativo atribuímos ao valor de nosso campo texto a subtração do comprimento do valor digitado pelo nosso limite.

Para fazermos o mesmo no lado servidor – lembre-se é sempre importante validarmos de ambos os lados – existe mais de uma opção, sendo que minhas duas preferidas seriam:

1. Poderíamos alterar nosso padrão original de validação para que incluísse uma nova informação de número máximo de caracteres – assim como temos a informação de número mínimo.
2. Caso você possua permissão, definir, através do comando ini_set, a diretiva de configuração post_max_size – esta diretiva permite a limitação da quantidade de bytes que podem ser enviados para o seu script php.

Abraços e até o próximo artigo!