HTML <textarea> 的最大长度

Posted 2023-03-04

【中文标题】HTML <textarea> 的最大长度

【英文标题】：Max length for HTML <textarea>

【发布时间】：2010-09-07 19:10:10

【问题描述】：

如何限制可输入 html <textarea> 的最大字符数？我正在寻找一个跨浏览器的解决方案。

【参考方案1】：

TEXTAREA 标记没有 MAXLENGTH 属性，就像 INPUT 标签会，至少在大多数标准浏览器中不会。限制TEXTAREA 标记中可以键入 的字符数的一种非常简单有效的方法是：

<textarea onKeyPress="return ( this.value.length < 50 );"></textarea>

注意：onKeyPress，将阻止任何按钮按下，任何按钮 包括退格键。

之所以有效，是因为布尔表达式会比较字段的长度 在将新字符添加到您想要的最大长度之前（本例中为 50，在此处使用您自己的），如果还有空间则返回 true，否则返回 false。从大多数事件中返回 false 会取消默认操作。 因此，如果当前长度已经是 50（或更多），则处理程序返回 false， KeyPress 动作被取消，角色未被添加。

美中不足的是可以粘贴到TEXTAREA， 这不会导致KeyPress 事件触发，从而绕过此检查。 Internet Explorer 5+ 包含一个 onPaste 事件，其处理程序可以包含 查看。但是，请注意，您还必须考虑到有多少 字符在剪贴板中等待知道总数是否会 带你超限与否。幸运的是，IE 还包含一个剪贴板 来自窗口对象的对象。1 因此：

<textarea onKeyPress="return ( this.value.length < 50 );"
onPaste="return (( this.value.length +
window.clipboardData.getData('Text').length) < 50 );"></textarea>

同样，onPaste 事件和clipboardData 对象仅适用于 IE 5+。对于跨浏览器解决方案，您只需要使用OnChange 或OnBlur 处理程序来检查长度，并根据需要进行处理（静默截断值，通知用户等）。不幸的是，这并没有捕捉到正在发生的错误，只有当用户尝试离开该字段时，这并不那么友好。

Source

此外，这里还有另一种方法，包括可以包含在页面中的已完成脚本：

http://cf-bill.blogspot.com/2005/05/textarea-maxlength-revisited.html

【讨论】：

请注意，上面写的onKeyPress函数会在达到字符限制后阻止任何文本进入textarea——不能删除任何字符。更强大的 sn-p 将允许用户达到最大限制，然后退格删除字符以使文本低于限制。

也许只是我和我的算法不好，但我的印象是，当在 textareas 中使用新行时，IE 和 FF 在 maxlength 方面的行为与 Chrome 不同。与\r\n 与\n 问题有关（当您的文本包含换行符时）...根据我的经验，maxlength 似乎在 Windows 上似乎无法跨浏览器运行...但没有新来的，只是旧的错误的 HTML/JS 东西......

【参考方案2】：

HTML5 现在允许maxlength attribute on <textarea>。

除了 IE support table on caniuse.com。

【讨论】：

@erdomester 它正在支持的浏览器上运行。您可以在我提供的 w3c 链接中进行测试。

我试过了，即使我使用 maxlength="500px" 也能正常工作。但是，当我发布该评论时，您提供的链接处于非活动状态，并且显示的页面（我猜）显示了与现在显示的属性不同的其他属性。

那个链接不是 W3C，而是 W3Schools，它以发布不正确的信息而闻名。

@Toby 是的，你是对的。我应该在我的评论中更清楚。不幸的是，我没有看到编辑评论的选项。

您可能需要注意，使用 maxlength 时换行符的计数可能不同，具体取决于浏览器。请查看this explanation 了解更多详情。

【参考方案3】：

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

参考Set maxlength in Html Textarea