在 Html Textarea 中设置 maxlength [重复]

Posted 2023-05-07

技术标签:

【中文标题】在 Html Textarea 中设置 maxlength [重复]【英文标题】：Set maxlength in Html Textarea [duplicate] 【发布时间】：2011-05-26 11:13:39 【问题描述】：

如何在textarea 中设置maxlength？为什么maxlength 在textarea 中不能正常工作？

【问题讨论】：

【参考方案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));  
          
    )  
);

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

【讨论】：

求助于 HTML5 并不是一个答案。我们期待跨浏览器支持。这使得这是迄今为止最正确的答案。请注意，此解决方案不是“纯”javascript，它需要使用 JQuery。（如果您在没有 JQuery 的情况下尝试它，并想知道为什么它不起作用。）不幸的是，对于 textarea 中的任何换行符，这都无法正常工作。我猜 JavaScript 将换行符视为一个字符而不是两个字符，因此当我尝试将“最大长度”字符串插入数据库时出现错误。我可能是错的，但是如果我正在输入一个短篇小说，并且在文本框的开头插入文本，那么在我输入时文本的结尾会被截断。可能在我不知情的情况下。 @3Dom：“使用 HTML5 不是解决办法。” - 使用 HTML5 doctype is 支持跨浏览器（他们测试了各种 doctype 以查看在旧浏览器中的工作原理），并使用 HTML5 中引入的属性和 JavaScript 后备不支持它的浏览器也是跨浏览器兼容的。【参考方案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 是另一个示例。

【讨论】：

【参考方案3】：

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

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

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

【讨论】：

除了键入之外，还有其他方法可以在文本区域中添加文本，例如粘贴。这个解决方案可能对他们不起作用。不仅，它会阻止您在粘贴或加载超过最大大小的数字后擦除字符（您必须用鼠标选择和剪切......）。内联 javascript 事件绑定也不是实现这些限制的最语义化方式。关于此解决方案的另一个问题，如果字符数达到限制，将无法再使用键盘，即使是backspace @Frédéric 你也可以使用onkeydown 而不是onkeypress 来限制粘贴【参考方案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));
        
    )
);

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

【讨论】：

【参考方案5】：

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

【讨论】：

【参考方案6】：

在 HTML5 之前，只能使用 JavaScript 或服务器端验证来检查这一点（更好，因为 JavaScript 显然只能在启用 JavaScript 的情况下工作......）。 textareas 没有原生的 max-length 属性。

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

<!DOCTYPE html>

【讨论】：

【参考方案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 完全相同

【讨论】：

这不会在所有浏览器中正常工作。 <textarea> 元素中的硬换行符在 Firefox 和 Webkit 中没有（或没有；他们可能已经修复）正确计算。硬换行符必须作为 CR-LF 对传输（根据规范），但 Firefox 和 Webkit 仅将硬换行符计为 1 个字符。【参考方案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。此示例仅指示最大长度，它不会阻塞输入。

【讨论】：

【参考方案9】：

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

【讨论】：

以上是关于在 Html Textarea 中设置 maxlength [重复]的主要内容，如果未能解决你的问题，请参考以下文章

如何在 Javascript 中设置 textarea 值？

在 IE 和 FF 中设置 textarea 值

如何在 Textarea 中设置最小字符数

在 spark textarea 中设置图像样式

无法使用 jQuery 和 value 方法在 textarea 中设置文本

从 Jquery Ajax 调用中设置 CodeMirror 文本区域的值