Javascript 文本区域字符限制

我希望能够限制文本区域中的字符数。我使用的方法在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:

---

我已经为此编写了我的方法，在您的浏览器上测试它，并给我反馈

干杯

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

功能textarea控件（textarea、charlimit、charCounter）{
如果(
textarea.tagName.toLowerCase（）=“textarea”&&
类型（字符限制）=“编号”&&
类型（字符计数器）==“对象”&&
charCounter.innerHTML！==null
){
var oldValue=textarea.value；
addEventListener（“keyup”，function（））{
var charsLeft=charlimit parseInt（textarea.value.length，10）；
如果（charsLeft尝试使用jQuery以避免跨浏览器兼容性问题

$("textarea").keyup(function(){
    if($(this).text().length > 500){
        var text = $(this).text();
        $(this).text(text.substr(0, 500));   
    }
});

它应该可以工作。
这完全没有经过测试，但它应该可以满足您的需要

更新：这里有一个JSFIDLE要看。似乎正在工作

您可以将其转换为js文件，并在jquery引用之后引用它。
你会这样称呼它

$("textarea").characterCounter(200);

对正在发生的事情的简要解释

在每次按键事件中，功能都会检查按下的按键类型。如果可以接受，计数器将检查计数，修剪任何多余部分，并在达到限制后防止任何进一步的输入

插件也应该处理粘贴到目标中的问题

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

这适用于键控和粘贴，当您几乎达到限制时，它会将文本染成红色，当您浏览时会将其截断，并提醒您编辑文本，您可以这样做

变量t2=/*textarea引用*/

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= '';
        }
    }
}

我找到了一个很好的解决方案，如果浏览器支持该属性，它将使用该属性，而在不支持浏览器的情况下，则使用不引人注目的javascript pollyfill

多亏了我的修复，它在IE7+中也能正常工作：

HTML:

<textarea maxlength="50" id="text">This textarea has a character limit of 50.</textarea>

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
属性。

对于以下输入类型：
number
，
range
，
date
，
datetime
，
datetime local
，
month
，
time
，以及
week
（使用
min
和
max
属性）。
我认为这样做可能比大多数人想象的要容易

试试这个：

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;
    }

var yourTextArea=document.getElementById（“usertext”）.value；
//如果您想将字符数限制在不少于（比如）10个
//或者不超过400。
如果（yourTextArea.length<10 | | yourTextArea.length>400）{
警报（“该字段必须包含不少于10个且不超过400个字符。”）；
返回false；
}

请让我知道这是有用的。如果是的话，请投赞成票！谢谢

丹尼尔

使用textarea的maxlength属性可以做到这一点…简单的html代码..不需要JS或JQuery或服务器端检查..
快速且脏的通用JQuery版本。支持复制/粘贴

$('textarea[maxlength]').on('keypress mouseup', function(){
    return !($(this).val().length >= $(this).attr('maxlength'));
});

我相信如果你使用代理，它会起作用

$("textarea").on('change paste keyup', function () {
    var currText = $(this).val();
    if (currText.length > 500) {
        var text = $(this).text();
        $(this).text(text.substr(0, 500));
        alert("You have reached the maximum length for this field");
    }
});

还有…？如果我们连代码都看不到怎么回答这个问题？请用更多细节更新你的问题。如果你不想别人嘲笑你，请不要使用“html5”和“浏览器兼容性”在同一句话中..它将精确匹配500，如果用户粘贴文本然后继续键入该怎么办？在这种情况下返回false做什么？它不允许在textarea中键入额外的文本吗？完全正确。返回false将中止事件。在jQuery中有类似“stopPropagation”的内容或者别的什么。好吧，我实现了你的例子，但是当我达到字符限制（500）时，它就停止了，我甚至不能返回空格或删除部分文本。对，你可能想过滤掉[DEL]和[BACKSPACE]是的，只是为了安全。无论如何，他需要在提交和服务器端检查它。这使得它很慢。考虑到你在每个按键上移动内容，甚至光标移动。你所需要做的就是。KEYUP（函数（e）{if（＞500）{e预防错误（）））；在您的示例中，当按下一个键时，文本区域在释放键之前不会修剪字符数。我希望@webarto有这样的功能，但这会过滤掉[DEL]和[BACKSPACE]。您的示例允许在半秒钟后删除另一个字符之前放置另一个字符，但这并不是我真正想要的。我编辑了@Christian Sciberras提供的答案以过滤必要的键码，效果非常好！@inquisitive:通过更改显示if（$this.val（）的行，可以很容易地修复此问题.length>limit）到（$this.val（）.length>=limit）。我希望你不是像Christian的例子那样在线编写，至少已经将其移动到一个单独的js文件中。你编辑的方法似乎在IE 7+8中被破坏了。不过第一个方法似乎可以工作。@DanTello使用新的演示程序编写了新代码。适用于IE7+和其他浏览器。没有签入IE6-。不适用于IE“对'in'的操作数无效”：应为对象“@Nileshpatel我已经测试了我的演示（这里有一个用于IE测试的示例）在IE7+中，控制台中没有错误，字符限制正常工作。问题是：如果您遇到限制，它将不再接受任何按键，因此您甚至无法对最后一句话进行退格。您必须使用上下文菜单删除某些内容。旧浏览器不支持maxlength。对于IE，它必须是版本10。
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]').on('keypress mouseup', function(){
    return !($(this).val().length >= $(this).attr('maxlength'));
});

$("textarea").on('change paste keyup', function () {
    var currText = $(this).val();
    if (currText.length > 500) {
        var text = $(this).text();
        $(this).text(text.substr(0, 500));
        alert("You have reached the maximum length for this field");
    }
});