在HTML textarea上模拟HTMLinput“maxlength”属性的最佳方法是什么？
一个HTML文本input有一个叫做“maxlength”的属性，由浏览器实现，如果设置了一定数量的字符后阻止用户input。
另一方面，HTML textarea元素没有这个属性。 我的目标是在HTML textarea上模拟maxlength的行为。 要求：
- 至less，显示（CSS更改）用户input的字符太多。
- 理想情况下，阻止用户input更多的字符，就像在HTMLinput中发生的那样。
据了解，服务器端validation应该再次检查长度。 这里我只关注客户端部分。
我的问题是：在HTML textarea上模拟maxlength的最简洁的客户端方式是什么？ 理想情况下，指向您已经使用的经过validation的开源JavaScript代码片段。
看看这个网站上的评论，倒计时。 我以前就是这样做的，简单而有效。 堆栈溢出也很好地利用颜色。
也许你没有足够的代表来看评论框。
键入时，它会进行一些倒计时。 在接近阈值时，颜色从黄色变为红色。 所有使用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>
我在这里发现了一个很好的脚本，在inputstring的长度超过MaxLen参数后，用户不再input更多的文本，它具有不可否认的优点，大多数情况下不会超出用户的面部。
这个脚本的问题是，它也阻止了导航键（箭头，家庭，结束）以及退格和删除，所以我稍微修改了一下，否则用户不能删除他input的文本，如果他达到了设置的限制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的Textarea Maxlength脚本可在他的网站上find。 没有什么奇特的，只是普通的旧JavaScript。
你可以很容易地使用这个作为一个起点，并作出改变，以适应你的CSS“通知”要求。
请注意，作者说：“我的脚本的目的不是强制执行最大长度，虽然可以很容易地改变，但是我决定限制我的脚本在用户超过最大数量时提供礼貌的提示字符“。
更新：由于附加文章linkrot，这里是该链接曾经存在的代码：
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(); function加载。
这里是适合我的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字段作为input的事件处理程序。 检查此处理程序中字段文本的长度，如果达到最大长度，则返回false。 （当然，返回之前做任何CSS样式切换）。 否则返回true。 textarea应该看起来像这样。
<textarea onkeydown="return checkMaxLength(event, this, 1000);"></textarea>
使用JavaScript框架（ 原型 ， jQuery等），以便您具有跨浏览器事件支持。 在keyup上写一行代码以防止用户进入最大长度。
注意：您还必须检查长度服务器端。
我想我可以放弃这一点，只是另一种做同样的事情的方式。 我喜欢这样做，因为你可以把它包装在一些代码来检查你是否在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插件，它允许你为textarea添加一个计数器。 其中一个特性是它允许您设置字段中允许的最大字符数，并强制执行该字符，以便用户不能超出该限制。
这是简单可数的GitHub页面：
https://github.com/aaronrussell/jquery-simply-countable/
你会这样使用它…
$('#my_textarea').simplyCountable({ counter: '#counter', maxCount: 140, strictMax: true });
