HTML 文本输入有一个名为“maxlength”的属性，由浏览器实现，如果设置了一定数量的字符后会阻止用户输入。
另一方面，HTML textarea 元素没有这个属性。我的目标是在 HTML textarea 上模拟 maxlength 的行为。要求：
据了解，服务器端验证应该再次检查长度。这里我只关注客户端部分。
我的问题是：在 HTML textarea 上模拟 maxlength 的最干净的客户端方式是什么？理想情况下，请指向您使用过的经过验证的开源 JavaScript 片段。
看看这个网站上的评论，倒计时。我以前也这样做过，简单有效。Stack Overflow 也很好地利用了颜色。
也许您没有足够的代表来查看评论框。
打字时它会倒计时。在接近阈值时，颜色从黄色变为红色。全部使用 JavaScript，我假设 textarea 的 keyup 事件。
编辑：如何用 jQuery 完成它？
<script language="javascript" type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready( function () {
setMaxLength();
$("textarea.checkMax").bind("click mouseover keyup change", function(){checkMaxLength(this.id); } )
});
function setMaxLength() {
$("textarea.checkMax").each(function(i){
intMax = $(this).attr("maxlength");
$(this).after("<div><span id='"+this.id+"Counter'>"+intMax+"</span> remaining</div>");
});
}
function checkMaxLength(strID){
intCount = $("#"+strID).val().length;
intMax = $("#"+strID).attr("maxlength");
strID = "#"+strID+"Counter";
$(strID).text(parseInt(intMax) - parseInt(intCount));
if (intCount < (intMax * .8)) {$(strID).css("color", "#006600"); } //Good
if (intCount > (intMax * .8)) { $(strID).css("color", "#FF9933"); } //Warning at 80%
if (intCount > (intMax)) { $(strID).text(0).css("color", "#990000"); } //Over
}
</script>
而 HTML 是
<textarea id="text" maxlength="250" class="checkMax"></textarea>
我在这里找到了一个很好的脚本，它在输入字符串的长度超过 MaxLen 参数后阻止用户输入更多文本，它具有不可否认的好处，即大部分时间都远离用户的脸。
我对那个脚本的问题是它也阻止了导航键（箭头、home、end）以及退格和删除，所以我稍微修改了它，否则如果用户达到了设置的限制，他将无法删除他输入的文本MaxLen（这会有点搞笑：P）。
Javascript：
function imposeMaxLength(Event, Object, MaxLen)
{
return (Object.value.length <= MaxLen)||(Event.keyCode == 8 ||Event.keyCode==46||(Event.keyCode>=35&&Event.keyCode<=40))
}
以及与之配套的 HTML：
<textarea onkeypress="return imposeMaxLength(event, this, 110);" rows="4" cols="50">
用户仍然可以通过将文本粘贴到 textarea 来绕过这个限制，但这可以在impactMaxLength 中轻松解决。
PPK 的 Textarea Maxlength脚本可在他的网站上找到。没什么特别的，只是普通的旧 JavaScript。
您可以轻松地将此作为起点并进行更改以适应您的 CSS“通知”要求。
请注意，作者指出：“我的脚本的目的不是强制执行最大长度，尽管可以很容易地更改它来做到这一点。但是，我决定将我的脚本限制为在用户超过最大长度时给予礼貌提醒字符。”
更新： 由于所附文章中的链接失效，这里是该链接上曾经存在的代码：
HTML：
<textarea id="text" name="text" maxlength="1250"></textarea>
JS：
function setMaxLength() {
var x = document.getElementsByTagName('textarea');
var counter = document.createElement('div');
counter.className = 'counter';
for (var i=0;i<x.length;i++) {
if (x[i].getAttribute('maxlength')) {
var counterClone = counter.cloneNode(true);
counterClone.relatedElement = x[i];
counterClone.innerHTML = '<span>0</span>/'+x[i].getAttribute('maxlength');
x[i].parentNode.insertBefore(counterClone,x[i].nextSibling);
x[i].relatedElement = counterClone.getElementsByTagName('span')[0];
x[i].onkeyup = x[i].onchange = checkMaxLength;
x[i].onkeyup();
}
}
}
function checkMaxLength() {
var maxLength = this.getAttribute('maxlength');
var currentLength = this.value.length;
if (currentLength > maxLength)
this.relatedElement.className = 'toomuch';
else
this.relatedElement.className = '';
this.relatedElement.firstChild.nodeValue = currentLength;
// not innerHTML
}
只需setMaxLength();在加载时调用该函数。
这是对我来说可以正常工作的 JavaScript 代码：
onBlur="if (this.value.length > 500) { alert('The notes field only allows 500 characters. You have ' + this.value.length + ' characters.'); this.focus(); return false; }"
我认为以下内容是“干净的”。在 Javascript 中创建一个事件处理程序，将 keydown 事件和 textarea 字段作为输入。检查此处理程序中字段中文本的长度，如果达到 maxlength，则返回 false。（当然在返回之前进行任何 css 样式切换）。否则返回真。textarea 应该是这样的。
<textarea onkeydown="return checkMaxLength(event, this, 1000);"></textarea>