在Html Textarea中设置maxlength

我怎样才能在textarea设置maxlength ? 为什么maxlengthtextarea不能正常工作?

在HTML5之前,我们有一个简单但可行的方法:首先在textarea元素中设置一个maxlength属性:

 <textarea maxlength='250' name=''></textarea> 

然后使用JavaScript来限制用户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)); } }) }); 

确保绑定“ input ”和“ propertychange ”事件,使其在各种浏览器如Firefox / Safari和IE中工作。

如果您使用HTML 5,则需要在您的DOCTYPE声明中指定。

对于有效的HTML 5文档,它应该从以下开始:

 <!DOCTYPE html> 

在HTML 5之前, textarea元素没有maxlength属性。

你可以在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 -- > 

为了限制input到textarea的字符数量,你需要在onChange事件中使用javascript。 然后,您可以计算字符的数量,并禁止进一步input。

以下是对文本input以及如何使用服务器和客户端脚本来限制大小的深入讨论。

这是另一个样本。

在html4中为textarea做maxlength的简单方法是:

 <textarea cols="60" rows="5" onkeypress="if (this.value.length > 100) { return false; }"></textarea> 

将“100”更改为任意数量的字符

正如我在对aqingsao的回答中所说的,当textarea有换行符时,至less在Windows上是不行的。

我已经稍微改变了他的答案:

 $(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)); } }) }); 

现在,当我尝试用换行符粘贴大量数据时,我得到的字符数量恰到好处。

 $(function(){ $("#id").keypress(function() { var maxlen = 100; if ($(this).val().length > maxlen) { return false; } }) }); 

在HTML5之前,只能通过JavaScript或服务器端validation来检查(更好,因为JavaScript显然只能在启用JavaScript的情况下运行…)。 textareas没有本地最大长度属性。

由于HTML5是一个有效的属性,所以将doctype定义为HTML5可能会有帮助。 不过,我不知道所有浏览器是否支持这个属性,

 <!DOCTYPE html> 

调整:无; 这个属性修复你的文本区域并绑定它。 你使用这个CSS属性id你的textarea.gave文本区域的ID和代表该ID可以使用此CSS属性。

尝试这个

 $(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; } }); }); 

对于我来说,作品非常完美,没有跳跃/显示其他angular色 工作完全像input上的最大长度

 <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只对HTML5有效。 对于HTML / XHTML,您必须使用JavaScript和/或PHP。 用PHP你可以使用strlen作为例子。这个例子只显示最大长度,它不会阻塞input。