Seguindo o Post anterior, vamos continuar com campos de texto.
Quando desenvolvemos um formulário onde existem vários campos a preencher, muitas vezes ocorre de um <textarea> que poderá conter “N” caracteres ficar expremido, com um tamanho inferior ao texto que receberá. Por padrão quando isso acontece, o <textarea> cria uma barra de rolagem.
Mas para quem está digitando isso não é muito agradável, pois a medida que se escreve, o texto acima desaparece.
O Google Chrome já implementou uma solução para isso, assim como o Safari. Por padrão os campos do tipo <textarea> nesses Browsers possuem uma opção de Resize. Desta maneira, o usuário tem autonomia sobre o <textarea>, podendo redimensiona-lo de forma a ficar do seu gosto.
Mas e quanto ao Firefox e IE?
Bom, esses Browsers ainda não possuem essa funcionalidade, então o que vamos fazer é implementar um Plugin que faz algo semelhante.
Novamente seguindo a filosofia “Write Less, Do More” do Jquery, o necessário para adicionar esta funcionalidade em nossos <textareas> é apenas uma linha:
$('textarea.resizable(.processed)').TextAreaResizer();
O que esta linha faz?
Bom, bem simples de entender. Todos os <textareas> com a classe “resizable” terão a funcionalidade de redimensão.
Nota: O Plugin aplica a funcionalidadede redimensão apenas na altura.
Vamos ver o Plugin em ação:
Minha Avaliação: Nota 8.0
Compatibilidade: Firefox 2.0+, IE 6+, Safari 3.0+, Chrome 2.0+
Obs: Apesar de funcionar no Safari e no Chrome, não faz sentido algum aplicar isso para estes Browsers, pois como expliquei acima, estes já possuem tal funcionalidade.
Download
Site oficial do Plugin: http://plugins.jquery.com/project/TextAreaResizer
Related Posts:
The Text Area Resizer – JQuery Plugin by Jaydson Gomes, unless otherwise expressly stated, is licensed under a Creative Commons Attribution 2.5 Brazil License.
