How to:Set Maxlength of Textarea using jQuery/JavaScript
- By Viral Patel on December 19, 2008
- General, How-To, JQuery, JavaScript
Maxlength of Textarea
Setting up maxlength of input text are easy. Just an attribute maxlength="##" does the work. But maxlength attribute does not work with textarea. I tried writing <textarea rows=”5″ cols=”30″ maxlength=”120″></textarea> but this does not works.
So what to do if we want to fix the maxlength of a textarea?
Use following jQuery plugin for setting maxlength of any textarea on your page.
First thing for doing is to add maxlength="XX" attribute in your <textarea> tag.
<textarea maxlength="15" rows="5" cols="30" name="address"></textarea>
Include the jQuery plugin javascript file in your html page where the textarea is.
<script language="javascript" src="jquery.maxlength.js"></script>
And, add following code snippet at the end of your html page.
<script type="text/javascript">
jQuery(document).ready(function($) {
//Set maxlength of all the textarea (call plugin)
$().maxlength();
})
</script>
That’s it.. This jQuery plugin will search every textarea on your page and restrict the user to enter text till the maxlength.
Following is the code of plugin
/*
*
* Textarea Maxlength Setter JQuery Plugin
* Version 1.0
*
* Copyright (c) 2008 Viral Patel
* website : http://viralpatel.net/blogs
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/
jQuery.fn.maxlength = function(){
$("textarea[@maxlength]").keypress(function(event){
var key = event.which;
//all keys including return.
if(key >= 33 || key == 13) {
var maxLength = $(this).attr("maxlength");
var length = this.value.length;
if(length >= maxLength) {
event.preventDefault();
}
}
});
}
Demo
Download
Download the Plugin file here. jQuery Plugin for setting maxlength of textarea.
Feel free to extend the functionality of this plugin and also use it and let me know your comments.
Get our Articles via Email. Enter your email address.
cool code.. Thanks viral .. .this code helps me a lot..
hi viral
great job thanks :D
Thanks Webcook for the comment. :)
Very good, but on paste large texts this script crashes….
Good Code. But not handled the paste situation
ya its great code!!!
If we want to Set Max Length TextArea OnPaste
use the following code
function maxLengthPaste(field,maxChars){
event.returnValue=false;
if((field.value.length + window.clipboardData.getData(\"Text\").length) > maxChars) {
return false;
}
event.returnValue=true;
}
Use OnPaste Went To Call This Function
onpaste=\"return maxLengthPaste(this,500)\"
And the space key?
You should not use a strict doctype, when you use this on your own pages, as there is no “maxlength” attribute defined in textarea. A “great” solution should include that information, at least, then show a way out of the dilemma.
I do actually use a quite similar solution for my textareas, but neither am I happy about it, nor would I call my idea a great solution. It is the usual crap, which the W3C imposes on us.
I have extended this in my own use to be able to take an extra setting to say what the attribute should be. I did this because when I am using asp.net, their standard textbox with multiline set removes the MaxLength property during rendering and never makes it to the screen.
Thanks for this plugin.
SPACE character checks.
Add the following before the current check for keystrokes. This keeps the user from entering spaces.
// If current length is equal to the max and they enter
// a space using the space bar then cancel
if (key == 32) {
var maxLength = $(this).attr(“maxlength”);
var length = this.value.length;
if (length == maxLength) {
event.preventDefault();
return;
}
}
I would like to have certain specific elements have a greater z-index than inital set vale as lorenzo suggests, however am not sure what extra jQuery code i need to do this, have tried
$(”.bridge”).css(”z-index”,”50000″); but dosent seem to have any effect, if anyone can point me in right direction be much appreciated
This is a simple plugin that worked for exactly what I needed.
As of jQuery 1.3 though, the @attr syntax is no longer being used. Moving forward you should change \"textarea[@maxlength]\" to \"textarea[maxlength]\" in the plugin.
Does not work with COPY/PASTE.
Make it work when copying and paste text into text area above!
It’s works if you CHANGE $(“textarea[@maxlength]“) TO $(“textarea[maxlength]“) on line 16.
I think that @ selector are depreciated.
This would be much more useful revised to recalculate with spaces and backspaces.
The cut and paste issue should be rolled in as well…
Thanks!
Okay – the spaces and backspaces are easy enough to add:
Replace:
if(key >= 33 || key == 13) {
With:
if(key >= 32 || key == 13 || key == 8) {
Cheers!
Try pasting a long text , This plugin will fail.
@Gurinder: Ofcourse pasting something will not work as already mentioned above. I will soon modify the code and try to fix this. :)
My version, compatible with jQuery 1.3
$("textarea[maxlength]").keypress(function(event){ var key = event.which; //all keys including return. if(key >= 33 || key == 13) { var maxLength = $(this).attr("maxlength"); var length = this.value.length; if(length == maxLength) { event.preventDefault(); $("#error_field").html('Maximum length is 120 characters.'); } } });