Posts Tagged ‘TextArea’

7 jQuery Plugins to Manipulate TEXTAREAs

Thursday, March 26th, 2009

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