如何使用JavaScript在HTML中的textArea强加maxlength
我想有一些function，如果我写
<textarea maxlength="50"></textarea> <textarea maxlength="150"></textarea> <textarea maxlength="250"></textarea> 它会自动强加在textArea上的最大长度。 如果可能的话，请不要在jQuery中提供解决scheme。
注意：如果我这样做，可以这样做：
<textarea onkeypress="return imposeMaxLength(event, this, 110);" rows="4" cols="50"> function imposeMaxLength(Event, Object, MaxLen) { return (Object.value.length <= MaxLen)||(Event.keyCode == 8 ||Event.keyCode==46||(Event.keyCode>=35&&Event.keyCode<=40)) }
从HTML textarea模拟HTMLinput“maxlength”属性的最佳方法是什么？
但重点是我不想写onKeyPress和onKeyUp每次我宣布textArea。
window.onload = function() { var txts = document.getElementsByTagName('TEXTAREA'); for(var i = 0, l = txts.length; i < l; i++) { if(/^[0-9]+$/.test(txts[i].getAttribute("maxlength"))) { var func = function() { var len = parseInt(this.getAttribute("maxlength"), 10); if(this.value.length > len) { alert('Maximum length exceeded: ' + len); this.value = this.value.substr(0, len); return false; } } txts[i].onkeyup = func; txts[i].onblur = func; } }; }
我知道你想避免jQuery，但由于解决scheme需要JavaScript，这个解决scheme（使用jQuery 1.4）是最consise和强大的。
受到启发，但对Dana Woodman的回答是一个改进：
从这个答案的变化是：简化和更通用的，使用jQuery.live，也不设置val如果长度是好的（导致在IE中工作的箭头键，并在IE中明显的加速）：
// Get all textareas that have a "maxlength" property. Now, and when later adding HTML using jQuery-scripting: $('textarea[maxlength]').live('keyup blur', function() { // Store the maxlength and value of the field. var maxlength = $(this).attr('maxlength'); var val = $(this).val(); // Trim the field if it has content over the maxlength. if (val.length > maxlength) { $(this).val(val.slice(0, maxlength)); } });
编辑：更新版本的jQuery 1.7+ ，使用而不是live
// Get all textareas that have a "maxlength" property. Now, and when later adding HTML using jQuery-scripting: $('textarea[maxlength]').on('keyup blur', function() { // Store the maxlength and value of the field. var maxlength = $(this).attr('maxlength'); var val = $(this).val(); // Trim the field if it has content over the maxlength. if (val.length > maxlength) { $(this).val(val.slice(0, maxlength)); } });
更新使用.live()来代替Eirik的解决scheme，因为它更健壮。
即使你想要一个没有使用jQuery的解决scheme，我想我会添加一个通过Googlefind这个页面的人，并寻找一个jQuery解决scheme：
$(function() { // Get all textareas that have a "maxlength" property. $('textarea[maxlength]').each(function() { // Store the jQuery object to be more efficient... var $textarea = $(this); // Store the maxlength and value of the field. var maxlength = $textarea.attr('maxlength'); var val = $textarea.val(); // Trim the field if it has content over the maxlength. $textarea.val(val.slice(0, maxlength)); // Bind the trimming behavior to the "keyup" event. $textarea.bind('keyup', function() { $textarea.val($textarea.val().slice(0, maxlength)); }); }); });
希望对你有帮助Google员工
HTML5将一个maxlength属性添加到textarea元素，如下所示：
<!DOCTYPE html> <html> <body> <form action="processForm.php" action="post"> <label for="story">Tell me your story:</label><br> <textarea id="story" maxlength="100"></textarea> <input type="submit" value="Submit"> </form> </body> </html>
目前在Chrome 13，FF 5和Safari 5中都支持这一function。不足为奇的是，这在IE 9中不受支持。（在Win 7上testing）
这个解决scheme避免了IE中添加文本中间的字符时删除最后一个字符的问题。 它也适用于其他浏览器。
$("textarea[maxlength]").keydown( function(e) { var key = e.which; // backspace = 8, delete = 46, arrows = 37,38,39,40 if ( ( key >= 37 && key <= 40 ) || key == 8 || key == 46 ) return; return $(this).val().length < $(this).attr( "maxlength" ); });
然后，我的表单validation将处理用户可能粘贴的任何问题（仅在IE中出现问题）超出textarea最大长度的文本。
这是我刚刚在我的网站上使用的一些调整的代码。 它被改进以显示剩余字符的数量给用户。
（对不起，没有请求jQuery的OP，但是严重的是，谁今天不用jQuery？）
$(function() { // Get all textareas that have a "maxlength" property. $("textarea[maxlength]").each(function() { // Store the jQuery object to be more efficient... var $textarea = $(this); // Store the maxlength and value of the field var maxlength = $textarea.attr("maxlength"); // Add a DIV to display remaining characters to user $textarea.after($("<div>").addClass("charsRemaining")); // Bind the trimming behavior to the "keyup" & "blur" events (to handle mouse-based paste) $textarea.on("keyup blur", function(event) { // Fix OS-specific line-returns to do an accurate count var val = $textarea.val().replace(/\r\n|\r|\n/g, "\r\n").slice(0, maxlength); $textarea.val(val); // Display updated count to user $textarea.next(".charsRemaining").html(maxlength - val.length + " characters remaining"); }).trigger("blur"); }); });
尚未经过国际多字节字符testing，所以我不确定它是如何与那些工作。
还要添加以下事件来处理粘贴到textarea中：
... txts[i].onkeyup = function() { ... } txts[i].paste = function() { var len = parseInt(this.getAttribute("maxlength"), 10); if (this.value.length + window.clipboardData.getData("Text").length > len) { alert('Maximum length exceeded: ' + len); this.value = this.value.substr(0, len); return false; } } ...
Internet Explorer 10，Firefox，Chrome和Safari支持maxlength属性。
注意： Internet Explorer 9及更早版本或Opera中不支持
<textarea>标记的maxlength属性。
从HTML maxlength属性w3schools.com
对于IE8或更早版本，您必须使用以下内容
//only call this function in IE function maxLengthLimit($textarea){ var maxlength = parseInt($textarea.attr("maxlength")); //in IE7,maxlength attribute can't be got,I don't know why... if($.browser.version=="7.0"){ maxlength = parseInt($textarea.attr("length")); } $textarea.bind("keyup blur",function(){ if(this.value.length>maxlength){ this.value=this.value.substr(0,maxlength); } }); }
PS
所有主stream浏览器都支持
<input>标签的maxlength属性。
从HTML maxlength属性w3schools.com
更好的解决办法相比，修剪textarea的价值。
$('textarea[maxlength]').live('keypress', function(e) { var maxlength = $(this).attr('maxlength'); var val = $(this).val(); if (val.length > maxlength) { return false; } });
你可以使用jQuery来简单明了
JSFiddle DEMO
<textarea id="ta" max="10"></textarea> <script> $("#ta").keypress(function(e){ var k = e.which==0 ? e.keyCode : e.which; //alert(k); if(k==8 || k==37 || k==39 || k==46) return true; var text = $(this).val(); var maxlength = $(this).attr("max"); if(text.length >= maxlength) { return false; } return true; }); </script>
它在Firefox ， Google Chrome和Opera进行testing
上面代码的小问题在于val（）不会触发change（）事件，所以如果使用backbone.js（或其他框架进行模型绑定），模型将不会被更新。
我发布解决scheme对我很好。
$(function () { $(document).on('keyup', '.ie8 textarea[maxlength], .ie9 textarea[maxlength]', function (e) { var maxLength = $(this).attr('maxlength'); if (e.keyCode > 47 && $(this).val().length >= maxLength) { $(this).val($(this).val().substring(0, maxLength)).trigger('change'); } return true; }); });
我最近在textarea上实现了maxlength行为，并遇到这个问题中描述的问题： Chrome浏览器使用maxlength属性计算textarea中的字符错误 。
所以这里列出的所有实现都将起到一点小function。 为了解决这个问题.replace(/(\r\n|\n|\r)/g, "11")在.length之前添加.replace(/(\r\n|\n|\r)/g, "11") 。 切线时记住它。
我结束了这样的事情：
var maxlength = el.attr("maxlength"); var val = el.val(); var length = val.length; var realLength = val.replace(/(\r\n|\n|\r)/g, "11").length; if (realLength > maxlength) { el.val(val.slice(0, maxlength - (realLength - length))); }
不知道它是否完全解决了问题，但现在对我来说还是有效的。
试试这个在IE9，FF，Chrome中工作的jQuery，并向用户提供倒计时：
$("#comments").bind("keyup keydown", function() { var max = 500; var value = $(this).val(); var left = max - value.length; if(left < 0) { $(this).val( value.slice(0, left) ); left = 0; } $("#charcount").text(left); }); <textarea id="comments" onkeyup="ismaxlength(this,500)"></textarea> <span class="max-char-limit"><span id="charcount">500</span> characters left</span>
尝试使用这个代码示例：
$("#TextAreaID1").bind('input propertychange', function () { var maxLength = 4000; if ($(this).val().length > maxLength) { $(this).val($(this).val().substring(0, maxLength)); } });
这很容易：
<textarea onKeyPress="return ( this.value.length < 1000 );"></textarea>
