web-dev-qa-db-ja.com

テキストエリアの文字数制限

テキストエリアの文字数を制限したいと思います。私が使用している方法は、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>

Body要素の下部にあるJavaScript：

textarea=document.getElementById('user_post_textarea');
javascripthtmltextareacross-browser
27
Web_Designer

ブラウザーでサポートされている場合は 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属性として そのようなことはありません があります。
次の入力タイプの場合：number、range、date、datetime、datetime-local、month、time、およびweek（ まだ完全にはサポートされていません ）minおよびmaxを使用します属性。

70
Web_Designer

これは完全にテストされていませんが、必要なことを行う必要があります。

更新：ここにjsfiddleがあります。動作しているようです。 リンク

これを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));
8
James South

これを行うことは、ほとんどの人が考えるより簡単だと思います！

これを試して：

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

これが便利だったことを教えてください。もしそうなら、投票してください！ THX！

ダニエル

2
Daniel Montenegro

textareaのmaxlength属性を使用すると、トリックが行われます...単純なhtmlコード.. JS、JQuery、またはサーバー側のチェックは不要です...

1
Rohit Gupta

これはキーアップと貼り付けで機能し、ほぼ限界に近づいたときにテキストを赤で色付けし、移動すると切り捨てて、テキストを編集するよう警告します。

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

デリゲートを使用するとうまくいくと思います。

$("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");
    }
});
0
El Colo

ブラウザ間の互換性の問題を回避するためにjQueryを使用してみてください...

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

速くて汚いユニバーサルjQueryバージョン。コピー/貼り付けをサポートします。

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