Just Posted: Introducing Chirpie for iPhone

7 jQuery Plugins to Manipulate TEXTAREAs

Mark It Up

Mark It Up Plugin

Mark It Up Plugin

Mark It Up is an amazingly powerful new jQuery plugin which deserves some significant recognition. It enables you to quickly modify any standard TEXTAREA within your page into a powerful markup editor, like HMTL, BBCode, Textile, Wiki plus much much more… It’s so simple that instantiating the editor is as easy as:

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

Website: jaysalvat.com
Download: markitup pack 1.1.5

ReType

retype

ReType is a really easy to use way to set your TEXTAREAs up with multi language keyboard support without forcing the user to switch keyboard types. The example given show a nice toggle ability on the TEXTAREA allowing the user to input Russian and German in the same textbox with an English keyboard. It also supports ALT key combinations for a very powerful implementation

Website: myyn.org
Download: jquery-retype

Modal Preview

Modal Preview Plugin

Modal Preview Plugin

Modal Preview is very simple, it gives you the ability to quickly preview the contents of a TEXTAREA submission before sending it off for processing. Implementation allows a few options like allowing HTML, fade animations, opacity and more:

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

Website: devkick.com
Download: ModalPreview

Text Input Limiter

This simple plugin does what a standard TEXTAREA input doesn’t do – it allows you to limit the number of characters you can put into it. Whilst the standard INPUT tags allow this in HTML, TEXTAREAs don’t, so with this plugin you can quickly enable it:

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

Download: textlimit.js

HTMLBox

HTMLBox Plugin

HTMLBox Plugin

HTMLBox is quite similar Mark It Up, although it simply focusses on a standard richtext editor.

Website: remiya.com
Download: HTMLBox 2.8

Resize

resizeResize allows you to do just that, resize the TEXTAREA. You need to insert a bit of CSS to give you the nice resize image, but other than that it is quite easy to implement:

$('textarea.resizable:not(.processed)').TextAreaResizer();

Website: itsavesyou.com
Download: TextAreaResize

TypeWatch

TypeWatch gives you the ability to know when the user has finished typing or has changed some text in a TEXTAREA. Its actually very similar to the events that already come with jQuery, however what it gives you in addition is the ability to say after X milliseconds DO something.

var options = {

callback:function(){ alert("changed search text"); },
wait:750,          // milliseconds
highlight:true,     // highlight text on focus
enterkey:true,     // allow "Enter" to submit data on INPUTs
}
$("#search").typeWatch( options );

Website: dennydotnet.com
Download: typewatch.js

Tools to help you learn…

Learning jQuery 1.3

Learning jQuery 1.3

Amazon Kindle 2

Amazon Kindle 2

jQuery UI 1.6

jQuery UI 1.6

12 Responses to “7 jQuery Plugins to Manipulate TEXTAREAs”

  1. Patternhead says:

    Some useful plugins here.

    Thanks for sharing.

  2. Kyle says:

    Yep, agreed… pretty nice list. :)

  3. Priya says:

    JQuery rocks…We hav a site which uses lots of flash stuff for no convincing reasons. I am gonna revamp it soon. JQuery is gonna be most important thing while I do that.

  4. Great collection and several plugins I wasn’t aware of. Thanks!

  5. Aamir Afridi says:

    Nice to see all these plugins grouped up in one article. I was looking for characters limitation and i found it here :)

  6. Peter James says:

    useful plugins, Thanks for sharing.

Trackbacks/Pingbacks

  1. [...] 7 jQuery Plugins to Manipulate TEXTAREAs | Steve Reynolds Blog [...]

  2. [...] 7 jQuery Plugins to Manipulate TEXTAREAs | Steve Reynolds Blog – 7 jQuery Plugins: Mark It Up, ReType, Modal Preview, Text Input Limiter, HTMLBox, Resize, TypeWatch (More…) [...]

  3. [...] 7 jQuery Plugins to Manipulate TEXTAREAs [...]

  4. [...] 7 jQuery plugins to manipulate textareas Subir Multiples ficheros con jQuery [...]

  5. [...] 7 jQuery Plugins to Manipulate TEXTAREAs | Steve Reynolds Blog Really handy for those building sites with forms for input for large blocks of text (tags: jquery textarea javascript plugins forms plugin webdesign html text) [...]

  6. [...] jQuery Plugins to Manipulate [...]

Leave a Reply