Neste artigo, reviso 7 maneiras de estilizar e aprimorar o elemento Textarea para agregar mais valor aos seus formulários.
Você aprenderá como aplicar diferentes formatos, controlar o estado, adicionar texto de espaço reservado e torná-lo compatível com as diretrizes de material design.
Uma área de texto HTML é um campo de entrada de várias linhas projetado para coletar texto maior e de formato livre de um usuário. Se você já preencheu um formulário que exigia uma resposta aberta, provavelmente usou uma área de texto.
Os exemplos comuns incluem comentários, descrições e interfaces de administração do sistema de gerenciamento de conteúdo como o WordPress.
Textareas são adicionadas a documentos HTML usando a tag textarea. Qualquer texto colocado entre as tags de abertura e fechamento textarea será processado dentro do elemento textarea como o texto”padrão”.
A maioria dos formulários são compostos de um elemento de formulário pai, um punhado de elementos de entrada e talvez uma textarea ou dois. Os campos de entrada de linha única podem ter seu tipo definido para diferentes tipos ao lado do texto, como e-mail, urls ou números de telefone. Quando você precisa coletar mais de uma linha de texto e/ou texto de formato livre grande, o textarea é o elemento de formulário de que você precisa.
Atributos ou propriedades de TextArea HTML
Há um coleção de atributos que podem ser aplicados para controlar o comportamento de uma textarea. Os atributos de entrada padrão, como nome, espaço reservado, tabindex e id estão disponíveis.
Mas você quase sempre deve definir os valores cols (colunas) e linhas para controlar o tamanho renderizado da textarea. Isso não limita o número de palavras ou caracteres que você pode inserir, apenas as dimensões físicas.
Esta é uma lista de atributos de área de texto que você precisa estar ciente:
- form : especifica um ou mais formulários
- maxlength : um número que especifica o número máximo de caracteres em textarea
- espaço reservado : especifica uma pequena dica do valor em textarea
- somente leitura : define o controle de entrada para somente leitura. Não permite que o usuário altere o valor. O controle, entretanto, pode receber foco e são incluídos ao navegar pelos controles de formulário
- linhas : especifica a altura da área de texto com base no número de linhas visíveis do texto. Se houver mais texto do que isso permite, os usuários podem rolar usando as barras de rolagem da textarea
- cols : especifica a altura da textarea com base no número de linhas visíveis do texto. Se houver mais texto do que isso permite, os usuários podem rolar usando as barras de rolagem da textarea
- wrap : especifica o texto a ser quebrado na textarea
O atributo wrap refere-se a como a entrada do usuário reage quando atinge o final de cada linha no campo de texto. A quebra pode ser definida usando um de três valores:
- Suave força as palavras a quebrar uma vez dentro da área de texto, mas uma vez que o formulário é enviado, as palavras não aparecerão mais como tal, e quebras de linha e espaçamento não são mantidos
- Difícil envolve as palavras dentro da caixa de texto e coloca quebras de linha no final de cada linha para que quando o formulário for enviado o texto será transferido conforme aparece no campo, incluindo quebras de linha e espaçamento
- Desativado define uma área de texto para ignorar todas as quebra e coloca o texto em uma linha contínua
Read-Only
Definir um valor”sim”ou”não”para o atributo somente leitura determina se um visualizador tem ou não permissão para manipular o texto dentro do campo de texto.
Este comportamento somente leitura permite que um internauta veja e destaque o texto dentro do elemento, mas não pode alterá-lo de nenhuma forma. Quando destacado, o usuário também pode Copiar (Ctrl + C em um PC, Ctrl-Clique em um Mac) o texto para a área de transferência local e colá-lo em qualquer lugar que desejar.
Desativado
Desativar a área de texto completamente impede que o surfista destaque, copie ou modifique o campo de qualquer forma. Para fazer isso, defina a propriedade disabled como”sim”.
Lembre-se de que só porque os usuários não conseguem copiar da tela diretamente, não os impede de fazer uma captura de tela ou extrair os dados de o código-fonte. Desativar a textarea não oferece segurança alguma.
Textarea Placeholder Text
Você pode pré-preencher o texto em uma textarea para dar aos usuários um exemplo ou descrição de como preencher o texto campo de área, mas isso exigirá que o script’limpe’o texto quando a entrada receber o foco. Em vez disso, você deve usar o atributo placeholder para fornecer instruções ou dicas.
Certifique-se de levar isso em consideração ao estilizar o rótulo da área de texto. Em meus exemplos, estou sobrepondo o rótulo na parte superior da textarea, de modo que o rótulo se sobreponha ao texto do espaço reservado.
Resolvi esse problema posicionando o rótulo acima da textarea quando o espaço reservado foi aplicado. Para simplificar, adicionei uma classe de’espaço reservado’ao rótulo para forçar o posicionamento. Usei a mesma regra de quando o foco é colocado na área de texto.
.form-row label.placeholder ,.form-row label.active {transform: translateY (-140%); tamanho da fonte: 0,8em; }
Usando o evento Change para validar e atualizar a página
O evento de alteração JavaScript é acionado conforme o usuário digita ou perde o foco. Você pode vincular a este evento para acionar a validação em tempo real ou outras mudanças na IU.
O evento de entrada é semelhante à mudança, mas é acionado sempre que o valor de um elemento muda, mesmo quando ainda está em focus.
Se você precisar realizar algum tipo de validação ou alteração da IU com base em quando a textarea tem ou perde o foco, você precisa vincular aos eventos de foco ou desfoque. Esses são eventos de campo de entrada bastante comuns. Usei-os para alternar o estado ativo do rótulo da textarea.
elem.addEventListener ("focus", function (e) { e.target.label.classList.toggle ("ativo");}); elem.addEventListener ("desfoque", função (e) {e.target.label.classList.toggle ("ativo");});
A validação da área de texto é normalmente simples porque o conteúdo é normalmente de formato livre. A maior parte do tipo, você apenas verificaria para ter certeza de que o campo tem texto quando for necessário. Você também pode precisar verificar se um número mínimo de caracteres ou palavras foi fornecido. Talvez seja necessário menos do que um número máximo de caracteres ou palavras.
Existe o atributo maxlength para limitar o número de caracteres, mas onde está a graça nisso?
Vamos use o evento’alterar’para verificar se o número de palavras é pelo menos 10.
min10.addEventListener ("input", função (e) {var value=e.target.value; if (value.match (/\ S +/g).length> 10) {e.target.classList.add ("válido"); e.target.classList. remove ("inválido");} else {e.target.classList.remove ("válido"); e.target.classList.add ("inválido");}});
Aplicando’Material Design’à TextArea e Label
Sou um fã de material design, é simples e limpo. Então, eu meio que’peguei emprestado’alguns estilos do MD Bootstrap para definir o estilo das áreas de texto e seus rótulos.
A textarea tem seu estilo personalizado para’ocultar’as bordas superior, direita e esquerda. Existem algumas transições aplicadas e a rolagem vertical está oculta.
.form-row textarea {transição: border-color.15s facilidade-in-out, box-shadow.15s Easy-in-out; esboço: 0; sombra da caixa: nenhum; fronteira: nenhum; border-bottom: 1px solid # ced4da; raio da borda: 0; tamanho da caixa: caixa de conteúdo; cor de fundo: transparente; overflow-y: oculto; preenchimento: 1,5 rem 0; redimensionar: nenhum; }
Quando o foco é dado à textarea, o rótulo associado se move acima da textarea e a fonte diminui. Este é um efeito normal do Material Design.
O legal é que você pode estilizar uma área de texto para renderizar de várias maneiras, este é apenas um exemplo.
Resumo
Textareas são um campo de entrada fundamental, usado em formulários em qualquer lugar. Eles são elementos muito simples de gerenciar, mas operam de maneira diferente de seus irmãos de linha única, o campo de entrada.
Lembre-se de sempre limitar o número de linhas e colunas exibidas, para que suas áreas de texto sejam renderizadas em um tamanho apropriado. Você também pode controlar a quebra automática de texto, o estilo e, claro, a validação.
Você pode verificar um arquivo de exemplo com diferentes atributos, estilos e scripts que você pode usar como referência inicial para suas áreas de texto em GitHub .
