# Textarea: dicas e truques que você sempre quis saber

> Dicas e truques essenciais para textarea HTML. Resize controlado, contagem de caracteres, auto-height e melhorias de UX em campos. Otimize agora!

URL: https://dpw.dev/html/textarea-dicas-truques-textarea/  
Publicado em: 2010-07-26  
Categoria: html  
Tags: interface  
Autor: Tárcio Zemel

**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!

> Artigo baseado em [Textarea Tricks](http://css-tricks.com/textarea-tricks/).

## 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.

```scss
textarea {
    background:url(img/textarea-background.webp) 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](/categoria/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.

```javascript
$('textarea')
  .focus(function() { $(this).css('background', 'none') })
  .blur(function() { if ($(this)[0].value == '') { $(this).css('background', 'url(img/textarea-background.webp) 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.

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:

```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:

```javascript
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:

```scss
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:

```scss
textarea {
resize:none;
}

```

## Adicionar resizer na textarea

A [resizeable interaction do jQuery UI](http://jqueryui.com/demos/resizable/) 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:

```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.

## 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:

## 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:

```scss
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](http://css-tricks.com/examples/TextareaTricks/).

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

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml