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>
Code language: HTML, XML (xml)<script language="javascript" src="jquery.maxlength.js"></script>
Code language: HTML, XML (xml)<script type="text/javascript">
jQuery(document).ready(function($) {
//Set maxlength of all the textarea (call plugin)
$().maxlength();
})
</script>
Code language: JavaScript (javascript)/*
* jQuery Maxlength plugin 1.0.0
*
* Copyright (c) 2013 Viral Patel
* //www.viralpatel.net
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*/
;(function ($) {
$.fn.maxlength = function(){
$("textarea[maxlength], input[maxlength]").keypress(function(event){
var key = event.which;
//all keys including return.
if(key >= 33 || key == 13 || key == 32) {
var maxLength = $(this).attr("maxlength");
var length = this.value.length;
if(length >= maxLength) {
event.preventDefault();
}
}
});
}
})(jQuery);
Code language: JavaScript (javascript)Java URL Encoder/Decoder Example - In this tutorial we will see how to URL encode/decode…
Show Multiple Examples in OpenAPI - OpenAPI (aka Swagger) Specifications has become a defecto standard…
Local WordPress using Docker - Running a local WordPress development environment is crucial for testing…
1. JWT Token Overview JSON Web Token (JWT) is an open standard defines a compact…
GraphQL Subscription provides a great way of building real-time API. In this tutorial we will…
1. Overview Spring Boot Webflux DynamoDB Integration tests - In this tutorial we will see…
View Comments
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;
}
}