Question

如何在maxlength中设置textarea？为什么maxlength无效textarea？

Answer 1

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

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

然后使用JavaScript限制用户输入：

$(function() {  
    $("textarea[maxlength]").bind('input propertychange', function() {  
        var maxLength = $(this).attr('maxlength');  
        if ($(this).val().length > maxLength) {  
            $(this).val($(this).val().substring(0, maxLength));  
        }  
    })  
});

确保绑定“输入”和“ propertychange ”事件，以使其适用于各种浏览器，例如Firefox / Safari和IE。

Answer 2

如果您使用的是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 --
  >

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

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

Here是另一个样本。

Answer 3

在html4中为textarea执行maxlength的简单方法是：

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

将“100”更改为您想要的多个字符

Answer 4

正如我在对aqingsao的回答的评论中所说，当textarea有换行符时，它起作用不大，至少在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));
        }
    })
});

现在，当我尝试使用换行符粘贴大量数据时，我得到了正确数量的字符。

Answer 5

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

Answer 6

在HTML5之前，只能通过JavaScript或服务器端验证进行检查（更好的是，因为JavaScript显然只能在启用JavaScript的情况下运行...）。 textareas没有原生的max-length属性。

由于HTML5是一个有效的属性，因此将您的文档类型定义为HTML5可能会有所帮助。但我不知道所有浏览器是否都支持此属性：

<!DOCTYPE html>

Answer 7

试试这个

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

对我来说，在没有跳跃/显示其他角色的情与输入上的maxlength完全相同

Answer 8

<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作为示例。此示例仅指示最大长度，它不会阻止输入。

Answer 9

调整大小：无; 此属性修复您的文本区域并绑定它。你使用这个css属性id你的textarea.gave文本区域是一个id，并且代表那个id，你可以使用这个css属性。

在Html Textarea中设置maxlength

9 个答案: