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'); 

10 Solutions collect form web for “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: numberrangedatedatetime datedatetime time datetime-localmonthtimeweek ( 尚未完全支持 )使用minmax属性。

这完全没有经过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> 
  • 限制textarea中的行数
  • 从textarea删除所有样式(边框,发光)
  • HTML5 textarea占位符不出现
  • 更正已禁用属性的值
  • 如何为html <textarea>添加默认值?
  • 突出显示文本区域内的文本
  • 在textarea中的光标位置(字符索引,而不是x / y坐标)
  • closurestextarearesize
  • Twitter引导 - 关注单击模式内的textarea
  • JavaScript通过.value或.innerHTML获取TextAreainput?
  • 使用标签在textarea中缩进