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.
|
1 2 3 4 |
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.
|
1 2 3 |
$('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.
|
1 |
<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:
|
1 2 3 4 5 6 7 8 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
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:
|
1 2 3 |
textarea { outline:none; } |
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:
|
1 2 3 |
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:
|
1 |
$("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.
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:
|
1 |
<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:
|
1 2 3 |
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!