HTML <textarea> 的最大长度答案

【问题标题】：Max length for HTML <textarea>HTML <textarea> 的最大长度
【发布时间】：2010-09-07 19:10:10
【问题描述】：

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

【问题讨论】：

标签： javascript html cross-browser 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

【讨论】：