在 Html Textarea 中设置 maxlength

问题描述

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

最佳解决方案

在 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) 上工作。

次佳解决方案

如果使用 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 的字符数，您需要使用 JavaScript 与 onChange 事件。然后，您可以对字符数进行计数，并禁止进一步输入。

Here 是关于文本输入的 in-depth 讨论，以及如何使用服务器端和客户端脚本来限制大小。

Here 是另一个样品。

第三种解决方案

在 html4 中为 textarea 做最大长度的简单方法是：

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

将”100″ 更改为所需的许多字符

第四种方案

正如我在 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));
        }
    })
});

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

参考文献

Set maxlength in Html Textarea [duplicate]

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

在 Html Textarea 中设置 maxlength