HTML <textarea> 的最大长度
-
09-06-2019 - |
题
如何限制 HTML 中可输入的最大字符数 <textarea>
?我正在寻找跨浏览器的解决方案。
解决方案
这 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
其他提示
HTML5 现在允许 maxlength
属性上 <textarea>
.
除 IE <= 9 和 iOS Safari 8.4 之外的所有浏览器均支持它。看 caniuse.com 上的支持表.
$(function(){
$("#id").keypress(function() {
var maxlen = 100;
if ($(this).val().length > maxlen) {
return false;
}
})
});