HTML <textarea>的最大长度

Question

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

Answer 1

该TEXTAREA标签没有MAXLENGTH属性,该属性的方式 INPUT标记确实,至少在大多数标准的浏览器不.一个非常简单而有效的方式来限制可以字符数输入到TEXTAREA标签是:

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

注意: onKeyPress,将阻止按任何按钮, 包括退格键的任何按钮.

这是有效的,因为布尔表达式将新字符添加到所需的最大长度之前的字段长度进行比较(在此示例中为50,在此处使用您自己的长度),如果还有一个空间,false则返回true,否则返回true .从大多数事件返回false会取消默认操作.因此,如果当前长度已经是50(或更多),则处理程序返回false,KeyPress操作将被取消,并且不会添加该字符.

美中不足的是,有可能粘贴到一个TEXTAREA不会导致KeyPress事件发生的情况下,绕过这个检查.Internet Explorer 5+包含一个onPaste事件,其处理程序可以包含该检查.但是,请注意,您还必须考虑在剪贴板中等待的字符数,以确定总数是否会超过限制.幸运的是,IE还包含来自window对象的剪贴板对象.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上的支持表.