textarea_javascript スキルの maxlength 属性の奇妙な動作の詳細な説明

HTML5 では、今日説明する maxlength など、フォームに多くの変更が加えられました。さらに便利なのは、貼り付けたコンテンツもこの属性で制限できることです。文字数に基づいて自動的に切り捨てられます。

最近、ユーザーの入力を最大 600 文字に制限する (漢字と文字は区別されません) というリクエストを受けました。また、貼り付けた内容も 600 文字を入力すると自動的に切り捨てられる必要があります。

最初に思いついたのは maxlength で、基本的にはニーズを満たしていますが、まだ奇妙な動作がいくつかあります。

以下のコードを見てください:

<textarea name="text" id="text" maxlength="600"></textarea>
<p><span id="already"></span>/<span>600</span></p>
text.oninput = function() {
  already.textContent = text.value.length;
}

上記のコードでは、入力文字数を 600 に制限し、oninput を通じてユーザー入力を監視します。keydown はユーザーのキーボード入力のみを監視し、貼り付けには応答しないため、使用されません。 。 。 oninputでそれができます。

現時点では、600 単語を直接入力した後、一部を削除して再度入力することはできなくなり、パフォーマンスは正常になります。奇妙なことに、テキストエリアに大量のテキストを貼り付けると、maxlength の存在により、テキストエリアにはちょうど 600 文字があり、いくつかの文字を削除すると自動的に切り詰められてしまいます。もう一度入力してみると、次のようになります:

なんてことだ、入力できない！ ！ ！さらに削除すると入力を続けることができますが、 ！ ！ 600文字未満を入力したら、突然入力できなくなった！ ！ ！

これは、Chrome と私の Android マシンで発生します。 。理由はまだわかっていません。入力をテストした後は、この状況は発生しません。また、maxlength 属性の値が 10 など小さい場合、この状況は発生しません。 。 。

この場合、maxlength は信頼できません。oninput は非常に柔軟なので、それを使用してください。

コードを変更し、textarea の maxlength 属性を削除し、input を使用して textarea の値を監視すると、値が 600 を超えると自動的に切り捨てられ、入力が不可能であるかのように見えます。

text.oninput = function() {
  if(text.value.length >= 600) {
    text.value = text.value.substr(0,600);
  }
  already.textContent = text.value.length;
}

心配しない場合は、キーダウン イベントを監視し続けて、600 文字を超える文字を入力した後のデフォルト イベントを防ぐことができますが、バックスペースとキャリッジ リターンの削除など、禁止できないキーがいくつかあります。

text.onkeydown = function() {
  if(text.value.length >= 600) {
    // 删除:46 退格:8 回车:13
    if (!(e.which == '46' || e.which == '8' || e.which == '13')) {
      e.preventDefault();
    }
   }
}

IE8 以前は maxlength 属性も oninput もサポートしていませんが、より強力なメソッド onpropertychange を備えています。

以下では、textarea がコードの一端を通じて maxlength 属性を実装する方法を説明します

<script language="javascript" type="text/javascript"> 
function textlen(x,y){ 
 var thelength = x.value.length; 
 window.status=thelength+' of '+y+' maximum characters.'; 
} 
function maxtext(x,y){ 
 tempstr = x.value 
 if(tempstr.length>y){ 
  x.value = tempstr.substring(0,y); 
 } 
 textlen(x,y); 
} 
</script> 
<form name="myform"> 
   <textarea name="mytextarea"  
              cols="45"  
              rows="3"  
              wrap="virtual"  
              onkeypress="return(this.value.length<20)" 
              onkeydown="textlen(this,20)"  
              onkeyup="textlen(this,20)"  
              onblur="maxtext(this,20)">
   </textarea> 
</form>