HTML <textarea> 的最大长度

Question

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

Answer 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 处理程序来检查长度，并按照您想要的方式处理它（静默截断值，通知用户等）。不幸的是，只有当用户尝试离开该字段时，这才捕获正在发生的错误，这不太友好。

来源

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

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

Answer 2

HTML5 现在允许 maxlength 属性上 <textarea>.

除 IE <= 9 和 iOS Safari 8.4 之外的所有浏览器均支持它。看 caniuse.com 上的支持表.

Answer 3

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

参考 在 Html 文本区域中设置最大长度