Textarea: dicas e truques que você sempre quis saber

Textarea é um elemento básico de (X)HTML (especialmente formulários). Mas, muitos desconhecem, textareas possuem muitas peculiaridades, dicas e truques que permitem efeitos e interações interessantíssimas. Eis uma bela coleção de 9 truques e dica simples que você pode fazer com textareas. Aproveite!

Imagem como background da textarea (desaparece quando recebe foco)

É possível adicionar uma imagem de fundo para um textarea (assim como quase para qualquer outro elemento). Às vezes, por algum motivo qualquer, quando se adiciona um background, isso pode “quebrar” o estilo padrão do navegador para o textarea: o estilo de borda padrão – 1px sólido – é substituído por uma espessa borda chanfrada. Para restaurar o padrão do navegador, é possível, apenas, reestilizar a textarea.

textarea {
    background:url(img/textarea-background.png) center center no-repeat; /* "Quebra" o padrão de textarea */
    border:1px solid #888; /* "Restaura" o padrão */
}

Essa imagem de fundo certamente irá interferir com a legibilidade do texto quando as palavras começarem a “passar por cima”. Para resolver isso, basta uma solução simples (com jQuery) que faz o seguinte: retirar a imagem de background quando o textarea recebe foco e o coloca de volta no blur, caso nenhum texto tenha sido digitado.

$('textarea')
  .focus(function() { $(this).css('background', 'none') })
  .blur(function() { if ($(this)[0].value == '') { $(this).css('background', 'url(img/textarea-background.png) center center no-repeat') } });

Texto com placeholder HTML5

No HTML5, haverá um novo atributo: placeholder. Ele mostra um texto em cinza clarinho na área de texto que desaparece quando o textarea está em foco ou tem algum valor.

<textarea placeholder="A vingança nunca é plena, mata a alma e a envenena!" cols="30" rows="5"></textarea>

Texto via HTML5 placeholder funciona no Safari 5, Mobile Safari, Chrome 6 e Firefox 4 alpha.

Texto com placeholder, HTML5 e jQuery

É possível testar se um determinado elemento suporta um atributo, em particular, por meio de testes com JavaScript:

function elementSupportsAttribute(element, attribute) {
    var test = document.createElement(element);
    if (attribute in test) {
        return true;
    } else {
        return false;
    }
};

Então, dá para escrever o código de modo que se o browser suporta o atributo placeholder, ele o usa; se não, seu comportamento é “imitado” através de jQuery:

if (!elementSupportsAttribute('textarea', 'placeholder')) {
  // Fallback for browsers that don't support HTML5 placeholder attribute
  $("#example-three")
    .data("originalText", $("#example-three").text())
    .css("color", "#999")
    .focus(function() {
        var $el = $(this);
        if (this.value == $el.data("originalText")) {
          this.value = "";
        }
    })
    .blur(function() {
      if (this.value == "") {
          this.value = $(this).data("originalText");
      }
    });
} else {
  // Browser does support HTML5 placeholder attribute, so use it.
  $("#example-three")
    .attr("placeholder", $("#example-three").text())
    .text("");
}

Remover o brilho azul

Todos os browsers WebKit, o Firefox 3.6 e Opera 10 colocam uma borda azul brilhante ao redor de textareas quando estão em foco. É possível removê-lo da seguinte forma:

aa81b0adad66cd642c09c6a231292b51005

Você também pode aplicar à pseudo-classe :focus que vai funciona de qualquer maneira. Que saibamos, ainda não foi encontrada uma maneira de remover o brilho do Firefox e Opera. Se souber, por favor, comente!

Remover resizer da textarea

Navegadores baseados em WebKit colocam um pequeno elemento de UI no canto inferior direito das textareas para que os usuários possam redimensionar a área de texto. Se, por qualquer motivo, você quiser remover isso, uma regra CSS simples é tudo o que você precisa:

textarea {
resize:none;
}

Adicionar resizer na textarea

A resizeable interaction do jQuery UI pode ser usada em textareas. Ela funciona em todos os browsers e substitui a versão do WebKit nativa, já que essa versão tem todos os tipos de coisas mirabolantes (como callbacks e animações).

Para usar a interação, é preciso carregar jQuery e jQuery UI em sua página e usar o seguinte javascript:

$("textarea").resizable();

Fica a pergunta: usar jQuery e jQuery UI somente para adicionar o resize handle a suas textareas vale a pena? Não uma “resposta certa” para a pergunta; só você pode julgar se isso é adequado às necessidades e especificações de seu projeto.

Auto-redimensionar conforme o conteúdo

James Padolsey tem um script jQuery muito bom para auto redimensionar textareas conforme o conteúdo. A textarea começa com um tamanho normal razoável e, conforme você digita mais e mais conteúdo, ela se expande para incluir todo o texto, ao invés de mostrar a barra de rolagem padrão.

O plugin tem uma variedade de opções (confira), mas, em sua forma mais simples de uso, basta carregar o arquivo do script e usar assim:

$('textarea').autoResize();

Nowrap (sem quebra de linha automática)

Para evitar a quebra de texto com CSS normalmente é usada a regra “#seletor { white-space: nowrap; }“. Mas, por alguma razão, isso não funciona com textareas. Se a interação que você procura nas textareas é a linha não quebrar até que o Enter seja pressionado, é preciso usar o atributo “wrap” com o valor “off”, da seguinte maneira:

<textarea wrap="off" cols="30" rows="5"></textarea>

Remover barra padrão do Internet Explorer

O infame Internet Explorer coloca uma barra de rolagem vertical por padrão em todas as textareas. É possível ocultar isso com “overflow: hidden”, mas será um problema se a barra de rolagem realmente for necessária em função da quantidade de texto digitada. Felizmente, a propriedade overflow tem o valor “auto”, que exibe a barra de rolagem somente quando esta se fizer necessária. Fica assim:

textarea {
overflow:auto;
}

Conclusão

Você já tinha pensado que tantas interações e modificações fossem possível em um elemento de HTML tão básico como textarea? Se você quiser ser ainda mais ousado, com javascript e CSS é possível obter efeitos e interações ainda melhores! A propósito, os exemplos mostrados no artigo podem ser testados nesta página.

Se tiver alguma outra dica e/ou quiser mostrar algo de interessante que tenha feito em textareas, comente!