Set maxlength in Html Textarea
HtmlInputTextareaHtml Problem Overview
How can I set the maxlength in a textarea? And why maxlength is not working properly in textarea?
Html Solutions
Solution 1 - Html
Before HTML5, we have an easy but workable way: Firstly set an maxlength attribute in the textarea element:
<textarea maxlength='250' name=''></textarea>
Then use JavaScript to limit user input:
$(function() {
$("textarea[maxlength]").bind('input propertychange', function() {
var maxLength = $(this).attr('maxlength');
if ($(this).val().length > maxLength) {
$(this).val($(this).val().substring(0, maxLength));
}
})
});
Make sure the bind both "input" and "propertychange" events to make it work on various browsers such as Firefox/Safari and IE.
Solution 2 - Html
If you are using HTML 5, you need to specify that in your DOCTYPE declaration.
For a valid HTML 5 document, it should start with:
<!DOCTYPE html>
Before HTML 5, the textarea element did not have a maxlength attribute.
You can see this in the DTD/spec:
<!ELEMENT TEXTAREA - - (#PCDATA) -- multi-line text field -->
<!ATTLIST TEXTAREA
%attrs; -- %coreattrs, %i18n, %events --
name CDATA #IMPLIED
rows NUMBER #REQUIRED
cols NUMBER #REQUIRED
disabled (disabled) #IMPLIED -- unavailable in this context --
readonly (readonly) #IMPLIED
tabindex NUMBER #IMPLIED -- position in tabbing order --
accesskey %Character; #IMPLIED -- accessibility key character --
onfocus %Script; #IMPLIED -- the element got the focus --
onblur %Script; #IMPLIED -- the element lost the focus --
onselect %Script; #IMPLIED -- some text was selected --
onchange %Script; #IMPLIED -- the element value was changed --
%reserved; -- reserved for possible future use --
>
In order to limit the number of characters typed into a textarea, you will need to use javascript with the onChange event. You can then count the number of characters and disallow further typing.
Here is an in-depth discussion on text input and how to use server and client side scripting to limit the size.
Here is another sample.
Solution 3 - Html
simple way to do maxlength for textarea in html4 is:
<textarea cols="60" rows="5" onkeypress="if (this.value.length > 100) { return false; }"></textarea>
Change the "100" to however many characters you want
Solution 4 - Html
As I said in a comment to aqingsao's answer, it doesn't quite work when the textarea has newline characters, at least on Windows.
I've change his answer slightly thus:
$(function() {
$("textarea[maxlength]").bind('input propertychange', function() {
var maxLength = $(this).attr('maxlength');
//I'm guessing JavaScript is treating a newline as one character rather than two so when I try to insert a "max length" string into the database I get an error.
//Detect how many newlines are in the textarea, then be sure to count them twice as part of the length of the input.
var newlines = ($(this).val().match(/\n/g) || []).length
if ($(this).val().length + newlines > maxLength) {
$(this).val($(this).val().substring(0, maxLength - newlines));
}
})
});
Now when I try to paste a lot of data in with newlines, I get exactly the right number of characters.
Solution 5 - Html
$(function(){
$("#id").keypress(function() {
var maxlen = 100;
if ($(this).val().length > maxlen) {
return false;
}
})
});
Solution 6 - Html
Before HTML5 it's only possible to check this with JavaScript or by a server-side verification (better, because JavaScript obviously only works with JavaScript enabled...). There is no native max-length attribute for textareas.
Since HTML5 it's a valid attribut, so defining your doctype as HTML5 may help. I don't know if all browsers support this attribute, though:
<!DOCTYPE html>
Solution 7 - Html
try this
$(function(){
$("textarea[maxlength]")
.keydown(function(event){
return !$(this).attr("maxlength") || this.value.length < $(this).attr("maxlength") || event.keyCode == 8 || event.keyCode == 46;
})
.keyup(function(event){
var limit = $(this).attr("maxlength");
if (!limit) return;
if (this.value.length <= limit) return true;
else {
this.value = this.value.substr(0,limit);
return false;
}
});
});
For me works really perfect without jumping/showing additional characters; works exactly like maxlength on input
Solution 8 - Html
<p>
<textarea id="msgc" onkeyup="cnt(event)" rows="1" cols="1"></textarea>
</p>
<p id="valmess2" style="color:red" ></p>
function cnt(event)
{
document.getElementById("valmess2").innerHTML=""; // init and clear if b < max
allowed character
a = document.getElementById("msgc").value;
b = a.length;
if (b > 400)
{
document.getElementById("valmess2").innerHTML="the max length of 400 characters is
reached, you typed in " + b + "characters";
}
}
maxlength is only valid for HTML5. For HTML/XHTML you have to use JavaScript and/or PHP. With PHP you can use strlen for example.This example indicates only the max length, it's NOT blocking the input.
Solution 9 - Html
resize:none; This property fix your text area and bound it. you use this css property id your textarea.gave text area an id and on the behalf of that id you can use this css property.