Ausführliche Erklärung des seltsamen Verhaltens des Attributs maxlength in textarea_javascript-Skills

HTML5 hat viele Änderungen an Formularen mit sich gebracht, wie zum Beispiel die maximale Länge, über die wir heute sprechen werden. Dieses Attribut kann die maximale Anzahl der in das Eingabefeld eingegebenen Zeichen begrenzen. Praktischer ist, dass dies auch für den eingefügten Inhalt möglich ist werden automatisch basierend auf der Anzahl der Zeichen gekürzt.

Ich habe kürzlich eine Anfrage erhalten, die Benutzer auf die Eingabe von maximal 600 Zeichen zu beschränken (chinesische Zeichen und Buchstaben werden nicht unterschieden), und der eingefügte Inhalt muss außerdem automatisch abgeschnitten werden. Nach der Eingabe von 600 Zeichen ist keine Eingabe mehr möglich.

Das erste, was mir einfiel, war maxlength, was im Grunde den Anforderungen entspricht, aber es gibt immer noch einige seltsame Verhaltensweisen.

Sehen Sie sich den folgenden Code an:

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

Der obige Code begrenzt die Anzahl der Eingabezeichen auf 600 und überwacht die Benutzereingabe über oninput. Keydown wird nicht verwendet, da Keydown nur die Tastatureingabe des Benutzers überwachen kann und nicht auf das Einfügen reagiert. . . oninput kann es tun.

Zu diesem Zeitpunkt können Sie nach der direkten Eingabe von 600 Wörtern nicht mehr einige löschen und einige erneut eingeben, und die Leistung wird normal sein. Das Seltsame ist, dass, wenn Sie viel Text in einen Textbereich einfügen, dieser aufgrund der Existenz von maxlength automatisch abgeschnitten wird. Wenn Sie zu diesem Zeitpunkt einige Zeichen löschen, sind im Textbereich genau 600 Zeichen vorhanden und versuchen Sie dann erneut eine Eingabe, Sie werden Folgendes finden:

Heilige Scheiße, ich kann nicht tippen! ! ! Wenn Sie weitere löschen, können Sie mit der Eingabe fortfahren, aber! ! ! Als ich weniger als 600 Zeichen eingegeben hatte, konnte ich plötzlich nicht mehr eingeben! ! !

Das passiert unter Chrome und meinem Android-Rechner. . Der Grund ist noch nicht bekannt. Nach dem Testen der Eingabe tritt diese Situation nicht auf. Wenn der Wert des Attributs maxlength kleiner ist, tritt diese Situation nicht auf, z. B. 10. . .

In diesem Fall ist maxlength einfach selbst mehr Code zu schreiben. Da oninput so flexibel ist, verwenden Sie es.

Ändern Sie den Code, entfernen Sie das Attribut maxlength von textarea und überwachen Sie den Wert von textarea mithilfe der Eingabe. Wenn er 600 überschreitet, wird er automatisch abgeschnitten, wodurch die Illusion entsteht, dass eine Eingabe unmöglich ist.

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

Wenn Sie sich keine Sorgen machen, können Sie das Keydown-Ereignis weiterhin überwachen und das Standardereignis nach der Eingabe von mehr als 600 Zeichen verhindern. Es gibt jedoch mehrere Tasten, die nicht gesperrt werden können: Rücktaste und Wagenrücklauf löschen:

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

IE8 und niedriger unterstützen weder das Attribut maxlength noch oninput, verfügen aber über eine leistungsfähigere Methode: onpropertychange.

Im Folgenden wird erläutert, wie Textarea das Maxlength-Attribut über ein Ende des Codes implementiert

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