textarea字符限制
我想能够限制textarea中的字符数量。 我使用的方法在Google Chrome中效果很好，但是在Firefox中速度很慢，在IE中不起作用。
使用Javascript：
function len(){ t_v=textarea.value; if(t_v.length>180){ long_post_container.innerHTML=long_post; post_button.className=post_button.className.replace('post_it_regular','post_it_disabled'); post_button.disabled=true; } else{ long_post_container.innerHTML=""; post_button.className=post_button.className.replace('post_it_disabled','post_it_regular'); post_button.disabled=false; } if(t_v.length>186){ t_v=t_v.substring(0,186); } } HTML：
<textarea id="user_post_textarea" name="user_post_textarea" cols="28" rows="1" onkeypress="len();" onkeyup="len();"></textarea>
身体元素底部的Javascript：
textarea=document.getElementById('user_post_textarea');
我发现一个很好的解决scheme，如果浏览器支持它使用maxlength属性，并回落到不支持的浏览器中的一个不显眼的JavaScript pollyfill。
感谢@Dan Tello的评论，我修正了它，所以它也可以在IE7 +中使用：
HTML：
<textarea maxlength="50" id="text">This textarea has a character limit of 50.</textarea>
使用Javascript：
function maxLength(el) { if (!('maxLength' in el)) { var max = el.attributes.maxLength.value; el.onkeypress = function () { if (this.value.length >= max) return false; }; } } maxLength(document.getElementById("text"));
演示
HTML5中不存在minlength属性。
对于以下inputtypes： number ， range ， date ， datetime date ， datetime time datetime-local ， month ， time和week （ 尚未完全支持 ）使用min和max属性。
这完全没有经过testing，但它应该做你所需要的。
更新：这里是一个jsfiddle看看。 似乎正在工作。 链接
你会过去它成为一个js文件，引用你的jQuery参考后。 你会这样称呼它
$("textarea").characterCounter(200);
简要说明正在发生的事情。
在每个keyup事件中，函数都在检查按下的键types。 如果可以接受的话，计数器将检查计数，减less超出的数量，并在达到限制时防止进一步的input。
插件也应该粘贴到目标中。
; (function ($) { $.fn.characterCounter = function (limit) { return this.filter("textarea, input:text").each(function () { var $this = $(this), checkCharacters = function (event) { if ($this.val().length > limit) { // Trim the string as paste would allow you to make it // more than the limit. $this.val($this.val().substring(0, limit)) // Cancel the original event event.preventDefault(); event.stopPropagation(); } }; $this.keyup(function (event) { // Keys "enumeration" var keys = { BACKSPACE: 8, TAB: 9, LEFT: 37, UP: 38, RIGHT: 39, DOWN: 40 }; // which normalizes keycode and charcode. switch (event.which) { case keys.UP: case keys.DOWN: case keys.LEFT: case keys.RIGHT: case keys.TAB: break; default: checkCharacters(event); break; } }); // Handle cut/paste. $this.bind("paste cut", function (event) { // Delay so that paste value is captured. setTimeout(function () { checkCharacters(event); event = null; }, 150); }); }); }; } (jQuery));
这适用于键入和粘贴，当你几乎达到极限时它会将文本变为红色，当你过去时会截断它并提醒你编辑你的文本，你可以这样做。
var t2 = / * textarea reference * /
t2.onkeyup= t2.onpaste= function(e){ e= e || window.event; var who= e.target || e.srcElement; if(who){ var val= who.value, L= val.length; if(L> 175){ who.style.color= 'red'; } else who.style.color= '' if(L> 180){ who.value= who.value.substring(0, 175); alert('Your message is too long, please shorten it to 180 characters or less'); who.style.color= ''; } } }
我认为这样做可能比大多数人想象的容易！
尝试这个：
var yourTextArea = document.getElementById("usertext").value; // In case you want to limit the number of characters in no less than, say, 10 // or no more than 400. if (yourTextArea.length < 10 || yourTextArea.length > 400) { alert("The field must have no less than 10 and no more than 400 characters."); return false; }
请让我知道这是有用的。 如果是这样，请投票！ 谢谢！
丹尼尔
使用textarea的maxlength属性会做的伎俩…简单的HTML代码..不是JS或JQuery或服务器端检查需要….
尝试使用jQuery来避免跨浏览器兼容性问题…
$("textarea").keyup(function(){ if($(this).text().length > 500){ var text = $(this).text(); $(this).text(text.substr(0, 500)); } });
快速和肮脏的通用jQuery版本。 支持复制/粘贴。
$('textarea[maxlength]').on('keypress mouseup', function(){ return !($(this).val().length >= $(this).attr('maxlength')); });
我已经写了我的方法，在你的浏览器上testing它，并给我反馈。
干杯。
function TextareaControl(textarea,charlimit,charCounter){ if( textarea.tagName.toLowerCase() === "textarea" && typeof(charlimit)==="number" && typeof(charCounter) === "object" && charCounter.innerHTML !== null ){ var oldValue = textarea.value; textarea.addEventListener("keyup",function(){ var charsLeft = charlimit-parseInt(textarea.value.length,10); if(charsLeft<0){ textarea.value = oldValue; charsLeft = charlimit-parseInt(textarea.value.length,10); }else{ oldValue = textarea.value; } charCounter.innerHTML = charsLeft; },false); } }
... onkeydown="if(value.length>500)value=value.substr(0,500); if(value.length==500)return false;" ...
它应该工作。
$(function() { $("#QtChar")[0].innerText = "Quantidade de Caracteres Restantes "+ parseInt($("#txtMensagem")[0].maxLength); }); function tamanhoMensagem() { $("#QtChar")[0].innerText = "Quantidade de Caracteres Restantes "+ parseInt($("#txtMensagem")[0].maxLength - $("#txtMensagem").val().length); }
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> </head> <body> <textarea id="txtMensagem" maxlength="10" onkeyup="tamanhoMensagem()" ></textarea> <label id="QtChar"> </label> <body> </html>
