From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.
jMaxInput allows you to limit the input size of a textarea like it is done in Twitter. The number of characters left to type are shown while typing. The user can write as many characters as he wants (negative value is shown) but the text can only be submitted if the size of the input is below the limit (the button is active/inactive).
You can call it like this:
$("#div").maxinput();
You can as well define the following properties:
- limit: The maximum number of characters allowed
- position: The position of the message
- showtext: Boolean for showing the text message or just the number of characters left
- message: A custom message shown after the number of characters left
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
Pingback: uberVU - social comments
Hey.. Nice article..
I would like to share a similar tutorial: Maxlength Textarea using jQuery
great post as usual .. thanks .. you just gave me a few more ideas to play with
doesn’t work correctly. I can still copy/paste characters over the limit.
hi,
You should be able to to that. however the buttom is disabled right?
Pingback: jMaxInput: jQuery Twitter-Like Textarea | Codrops | Squico
Pingback: twitter-like textarea in jquery | WebDesignExpert.Me
Pingback: 5 efectos con jQuery - save ass
Pingback: #WDNDL For 12/22/2009 – The Decade According to Nerds, XMas Freebies, LOLz & Inspirations! | AndySowards.com :: Professional Web Design, Development, Programming Freelancer, Hacks, Downloads, Math and being a Web 2.0 Hipster?
Pingback: 5 fresh jquery plugin for web developers | denbagus blog
awesome article. I’m definitely looking forward to reading more posts!
It doesn’t work, if I leave a key pressed I can submit the form, try it in the example, just leave a key pressed so it writes something like ‘aaaaaaaaaaaaaaaaaa’.
Hi Cesar. I can’t simulate the behaviour you are saying… Which browser and version are you using?
Pingback: 5 New Useful jQuery Plugins For Your Next Projects | AEXT.NET
Awesome… really useful script…
Pingback: Twitter-Like Textarea using jQuery | ajaxdump
Thanks;But is there any way so that the color of the counter
change with the number of character left, just like twitter…
Pingback: Et voici Qwicker ! | Owni.fr
Pingback: 20 Best Twitter-likes And Useful Tutorials To Work With Twitter | AEXT.NET
Pingback: Twitter benzeri ajax ve jQuery örnekleri | Javascript | Web Önerilerimiz
Pingback: Blog-HemenUlas,WebMaster Bilgileri,Html Kodlar?,Webmaster bilgileri » Twitter Benzeri Ajax ve jquery örnekleri
Great plugin however I don’t feel that its best to rely on javascript to create a textarea.
It would be best if the script were just hooked to a preexisting textarea in the html rather than inserting one via javascript.
Cheers,
Anthony
The informal summary assited me a lot! Saved your blog, extremely excellent categories just about everywhere that I see here! I really appreciate the information, thanks.
The good article assited me a lot! Saved your website, very great categories everywhere that I see here! I like the info, thanks.
Very educating write up, saved your website in hopes to read more!
Hey… It looks like there’s a problem with the layout of the page. For some reason the text block is running into the edge. I don’t know if it’s just me or are others reporting the same thing? Just wanted to let you know in case you’ve been updating the site. Thanks!
Hey how to activate that “update” button? If I would like to update whatever the user has entered in the form to a different page called “tweet.php” ??
Your not handling pasted input (at least on firefox/linux, when inserting using the mouse)
Hey guys.It’s not work with non-ansi character set on Firefox5.
Test on Firefox5 ubuntu11.04.