HTML 文本输入有一个名为“maxlength”的属性，由浏览器实现，如果设置了该属性，则会在一定数量的字符后阻止用户输入。
另一方面，HTML textarea 元素没有此属性。我的目标是在 HTML 文本区域上模拟 maxlength 的行为。要求：
据了解，服务器端验证应该再次检查长度。这里我只关注客户端部分。
我的问题是：在 HTML 文本区域上模拟 maxlength 的最简洁的客户端方法是什么？理想情况下，请指向您使用过的经过验证的开源 JavaScript 片段。
【问题讨论】：
标签： javascript html textarea
看看这个网站上的 cmets，倒计时。我以前也这样做过，简单有效。 StackOverflow 也很好地利用了颜色。
也许您没有足够的代表来查看评论框。
当您键入时，它会运行一点倒计时。在接近阈值时，颜色从黄色变为红色。全部使用 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>
【讨论】：
var 关键字显式声明，因此会被注入到全局命名空间中。这被认为是不好的做法，可能会导致严重的问题。
我发现了一个很好的脚本here，它可以在输入字符串的长度超过 MaxLen 参数后阻止用户输入更多文本，它具有不可否认的好处，即大部分时间都不会出现在用户面前。
我对该脚本的问题是它还阻止了导航键（箭头，主页，结束）以及退格和删除，所以我稍微修改了它，否则用户无法删除他输入的文本，如果他到达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 中来绕过这个限制，但这可以在 imposeMaxLength 中轻松解决。
【讨论】：
PPK's 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 字段作为输入。检查此处理程序中字段中文本的长度，如果达到最大长度则返回 false。 （当然在返回之前进行任何 css 样式切换）。否则返回真。文本区域应如下所示。
<textarea onkeydown="return checkMaxLength(event, this, 1000);"></textarea>
【讨论】：
我想我可以试一试，这只是做同样事情的另一种方式。我喜欢这种方式，因为您可以将其包装在一些代码中以检查您是否在 IE 中运行，因为 maxlength 确实适用于 webkit 和 gecko 浏览器中的文本区域。它取决于在 html 中的 textarea 元素上设置的 maxlength 属性。也因为它实际上作为 maxlength 属性在默认情况下在浏览器中工作，防止用户添加超过指定的字符。
$(document).ready(function () {
$('textarea').on('keyup', function () {
// Store the maxlength and value of the field.
if (!maxlength) {
var maxlength = $(this).attr('maxlength');
}
var val = $(this).val();
var vallength = val.length;
// alert
if (vallength >= maxlength) {
alert('Please limit your response to ' + maxlength + ' characters');
$(this).blur();
}
// Trim the field if it has content over the maxlength.
if (vallength > maxlength) {
$(this).val(val.slice(0, maxlength));
}
});
//remove maxlength on blur so that we can reset it later.
$('textarea').on('blur', function () {
delete maxlength;
});
});
【讨论】：
这是我使用的一个名为“Simply Countable”的 jQuery 插件，它允许您向文本区域添加计数器。其中一项功能是它允许您设置字段中允许的最大字符数，并且它会强制执行它，因此用户不能超过该限制。
这是 Simply Countable 的 GitHub 页面：
https://github.com/aaronrussell/jquery-simply-countable/
你会这样使用它...
$('#my_textarea').simplyCountable({
counter: '#counter',
maxCount: 140,
strictMax: true
});
【讨论】：