3

​​イベントから、input[type=text]またはtextareaの所有者が適用後に減少または増加するかどうかを確認する方法はありますか?Textarea maxlength in IE


背景:Internet Explorer 8と9のユーザーを主要コンシューマとしてサポートするHTML5サイト(<!DOCTYPE html>)があります。いくつかのページでは、<textarea>の要素にmaxlength="100"の属性があります。 IEはmaxlength属性を認識せず、textareaに100文字以上を入力できます。

IEのtextareaの文字の長さを制限するshimは、input[type=text]要素と同じキーボード動作では見たことがありません。

そのため、私は1つ書きたいと思っています。

既存の実装では、このような何かを見て:

$('textarea[maxlength]').on('keydown keyup blur', function(e) { 
    var $this = $(this), 
     maxlen = $this.attr('maxlength'), 
     val = $this.val(); 

    if (val.length > maxlen) { 
     $this.val(val.substr(0, maxlen)); 
    } 
}); 

above implementationの問題点は、11個の文字を入力するか貼り付けることができるということであり、値は値が変更された後まで、MAXLENGTHにトリミングされていません。私はinput[type=text,maxlength]の振る舞いとよりよく一致するように、の変更を防ぐために、の値を変更します。

+0

重複したhttp://stackoverflow.com/questions/1125482/how-to-impose-maxlength-on-textarea-in-html-using-javascript? – Interrobang

+0

テキストの長さは、右クリックメニューから貼り付けることによっても増やすことができます。私はその出来事をキャッチする方法を知らない。 – Brilliand

+0

IEに「貼り付け」イベントがあります。 – user979672

答えて

1

あなたはすでにkeydownイベントとキーアップイベントを待ち受けています。残念ながら、何もできることはありません。 keypressイベントは何かを追加するかもしれませんが、キーアップと一緒にトリガーすると思います。

上記のコードの1つの問題は、右クリックして貼り付ける(または編集メニューを使用して)場合、役立たないということです。

可能な回避策の1つは、CSSを使用してテキストエリアを画面外に隠し、別の「偽の」テキストエリアを配置して、その場所を模倣します。ユーザーが入力すると、オフスクリーンでそれを動作させてから、画面上の「偽」にコピーします。実際には、右クリック>貼り付けのようなインスタンスでどのように動作するのかよく分かりません。

0

あなたの問題は、インターネットエクスプローラがmaxlengthの値をHTMLに入れないことです。例えば、それをjavaScriptにハードコードしてみてください。

$(document).on('input keyup', 'textarea', function(e) { 
     // maxlength attribute does not in IE prior to IE10 
     // http://stackoverflow.com/q/4717168/740639 
     console.debug("here") 
     var $this = $(this); 
     var maxlength = 255; 
     if (!!maxlength) { 
      var text = $this.val(); 

      if (text.length > maxlength) { 
       // truncate excess text (in the case of a paste) 
       $this.val(text.substring(0,maxlength)); 
       e.preventDefault(); 
      } 

     } 

    });