textarea字符限制

Question

我希望能够限制textarea中的字符数.我使用的方法在谷歌浏览器中效果很好,但在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>

body元素底部的Javascript:

textarea=document.getElementById('user_post_textarea');

Answer 1

我找到了一个很好的解决方案,如果浏览器支持它,则使用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"));

演示

有没有这样的事情作为一个minlength在HTML5属性.
对于下面的输入类型:number,range,date,datetime,datetime-local,month,time,和week(这还没有完全支持)使用min和max属性.

Answer 2

这完全未经测试,但它应该做你需要的.

更新:这是一个jsfiddle,看看.似乎工作.链接

您将它传递给js文件并在您的jquery引用之后引用它.你会这样称呼它..

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

对正在发生的事情的简要说明..

在每个keyup事件中,该函数正在检查按下了什么类型的键.如果可以接受,计数器将检查计数,调整任何多余的数量,并在达到限制时阻止任何进一步的输入.

该插件也应该处理粘贴到目标中.

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