7 jQuery Plugins para manipular TEXTAREAs

Mark It Up

Mark It Up é um surpreendentemente e poderoso novo plugin do jQuery plugin que merece algum reconhecimento significativo. Ele permite que você possa rapidamente modificar qualquer TEXTAREA dentro de sua página em um poderoso editor de marcação, como HTML, BBCode, Texto, Wiki e muito mais. É tão simples que para instanciar o editor é tão fácil como:

$('#html').markItUp(myHtmlSettings);

Site

ReType

ReType é realmente uma maneira fácil de usar para definir o seu TEXTAREA com suporte a multi linguagem de teclado sem forçar o usuário a mudar o tipo de teclado. O exemplo dado mostra uma bela capacidade de alternar o TEXTAREA permitindo ao utilizador introduzir russo e alemão no mesmo texto com um teclado em Inglês. Também suporta a tecla ALT com várias combinações para uma aplicação muito poderosa.

Site

Modal Preview

Modal Preview é muito simples, dá-lhe a possibilidade de visualizar rapidamente a apresentação do conteúdo de uma TEXTAREA antes de enviá-lo para processamento (POST). A aplicação permite algumas opções como a de permitir HTML, animações de fade (fadeIn(),fadeOut), opacidade e mais:

Ex:

$('form textarea').modalpreview(options);

Site

Text Input Limiter

Este simples plugin permite-lhe limitar o número de caracteres que você pode colocar em uma TEXTAREA. Embora o normal do HTML não tenha esta propriedade (MAXLENGTH) no TEXTAREA, com este plugin você pode ter:

jQuery("textarea").textlimit('span.counter',20)1

<a href="http://plugins.jquery.com/node/1554">Site</a>| <a href="http://plugins.jquery.com/files/textlimit.js_2.txt">Download</a>

<h2>HTMLBox</h2>

<a href="http://remiya.com/cms/projects/jquery-plugins/htmlbox/"><img class="aligncenter size-full wp-image-64" title="htmlbox" src="http://ruancarlos.com.br/Blog/wp-content/uploads/2009/03/htmlbox1.gif" alt="htmlbox" width="508" height="100" /></a>

HTMLBox é semelhante ao Mark It Up, embora apenas o default ser editor de texto rico.

<a href="http://remiya.com/cms/projects/jquery-plugins/htmlbox/">Site</a>

<h2>Resize</h2>

<a href="http://www.itsavesyou.com/TextArea_Resizer_example.htm"><img class="aligncenter size-full wp-image-65" title="resize" src="http://ruancarlos.com.br/Blog/wp-content/uploads/2009/03/resize1.gif" alt="resize" width="508" height="100" /></a>

Resize permite fazer exatamente isso, redimensionar a <strong>TEXTAREA</strong>. Você precisa inserir um pouco de <a href="http://pt.wikipedia.org/wiki/Cascading_Style_Sheets" target="_blank">CSS</a> para dar-lhe o simpático designer, mas é bastante fácil de implementar:
1$('textarea.resizable:not(.processed)').TextAreaResizer();

Site

TypeWatch

TypeWatch dá a você a habilidade de saber quando é se o usuário tenha acabado de escrever ou mudou algum texto em um TEXTAREA. É realmente muito semelhantes aos eventos que já vêm com jQuery, porém o que lhe dá, além disso, é a capacidade de dizer X milissegundos após fazer alguma coisa.

callback:function(){ alert("changed search text");},
wait:750,
highlight:true,
enterkey:true,
}
$("#search").typeWatch( options );

Site