Lösung für das Problem, dass Textarea die Anzahl der Wörter nicht durch die Fähigkeiten „maxlength attribute_javascript' begrenzen kann

Textbereich heißt Textbereich, auch bekannt als Textbereich, ein mehrzeiliges Texteingabesteuerelement mit Bildlaufleiste. Es wird häufig in Übermittlungsformularen auf Webseiten verwendet. Im Gegensatz zur Textsteuerung für einzeilige Textfelder kann die Anzahl der Wörter nicht über das Attribut „maxlength“ begrenzt werden. Aus diesem Grund müssen andere Methoden gefunden werden, um die Anzahl der Wörter zu begrenzen, um die voreingestellten Anforderungen zu erfüllen.

Der übliche Ansatz besteht darin, die #Skriptsprache zu verwenden, um die Anzahl der in das Textfeld „textarea“ eingegebenen Wörter zu begrenzen, was einfach und praktisch ist. Angenommen, wir haben einen Textbereich mit der ID txta1. Wir können seine Tastatureingabezeichen durch den folgenden Code auf 10 Zeichen (chinesische Zeichen oder andere Kleinwinkelzeichen) beschränken:

<script language="#" type="text/ecmascript"> 
window.onload = function() 
{ 
document.getElementById('txta1').onkeydown = function() 
{ 
if(this.value.length >= 10) 
event.returnValue = false; 
} 
} 
</script>

Sein Prinzip besteht darin, den Textbereich mit der angegebenen ID-Nummer durch das Keydown-Ereignis (Tastendruck auf der Tastatur) zu überwachen. Wie Sie sich vorstellen können, kann es die Tastatureingabe nur dann einschränken, wenn der Benutzer den Text mit der rechten Maustaste in die Zwischenablage einfügt , kann die Wortanzahl nicht gesteuert werden.

Eingabe über die Tastatur, im obigen Textbereich können nur 10 Zeichen eingegeben werden. Unser Ziel wurde jedoch nicht erreicht! Kopieren Sie einfach einen Text, fügen Sie ihn mit der rechten Maustaste ein und sehen Sie, was passiert.

Sie können im Internet andere JS-Skripte finden, die den oben genannten ähneln, egal wie gut sie sind, ihre Prinzipien sind die gleichen. Sie überwachen Eingaben im Textbereich durch Tastenbetätigungsereignisse wie „Taste nach unten“, „Taste nach oben“ oder „Taste drücken“. Verhindern Sie, dass die rechte Maustaste eingefügt wird. Wenn wir die Anzahl der Wörter im Textbereich wirklich begrenzen müssen, müssen wir der Webseite eine weitere Sperre hinzufügen. Dies wird zweifellos zusätzliche Kosten verursachen Es kann auch ein Problem für den Webseitenersteller sein, der nicht unbedingt dazu bereit ist. Tatsächlich gibt es einen einfacheren Weg: die Verwendung des onpropertychange-Attributs.

onpropertychange kann verwendet werden, um den Wert eines vorgegebenen Elements zu beurteilen. Wenn sich der Wert des Elements ändert, wird nur der Wert des überwachten Elements ausgelöst, sodass die Quelle der Eingabe vermieden wird Es kann idealerweise unsere Wortgrenze erfüllen. Es gehört zur Kategorie JS und kann im Formularfeldbereich verschachtelt verwendet werden. Das Folgende ist der Code- und Effektstil. Sie können die Eingabe wie oben testen und Sie werden feststellen, dass sie den Zweck wirklich erfüllt Die zur Eingabe verwendete Methode kann nur 100 Zeichen (chinesische Schriftzeichen oder andere chinesische Schriftzeichen) eingeben:

Code:

<textarea onpropertychange="if(value.length>100) value=value.substr(0,100)" class="smallArea" cols="60" name="txta" rows="8"></textarea>

Um die Sicherheit zu erhöhen, sollte das Hintergrundskript, das die Formulardaten verarbeitet, natürlich auch die übermittelten Daten erneut überprüfen. Wenn die Anzahl der Wörter die voreingestellte Anzahl überschreitet, werden sie entsprechend verarbeitet, um den Zweck zu erreichen die Anzahl der Wörter wirklich zu begrenzen. (Ende)

Eine weitere Möglichkeit, die Anzahl der eingegebenen Zeichen im Textbereich zu begrenzen (einschließlich Chinesisch können nur 10 eingegeben werden und vollständiger ASCII-Code kann 20 eingeben)

<script> 
function check() { 
var regC = /[^ -~]+/g; 
var regE = /\D+/g; 
var str = t1.value; 

if (regC.test(str)){ 
t1.value = t1.value.substr(0,10); 
} 

if(regE.test(str)){ 
t1.value = t1.value.substr(0,20); 
} 
} 
</script> 
<textarea maxlength="10" id="t1" onkeyup="check();"> 
</textarea>

Es geht auch anders:

function textCounter(field, maxlimit) { 
if (field.value.length > maxlimit){ 
field.value = field.value.substring(0, maxlimit); 
}else{ 
document.upbook.remLen.value = maxlimit - field.value.length; 
} 
}

<textarea name=words cols=19 rows=5 class=input1 onPropertyChange= "textCounter(upbook.words, 50) "> textarea> 
剩余字数: <input name=remLen type=text id= "remLen " style= "background-color: #D4D0C8; border: 0; color: red " value=50 size=3 maxlength=3 readonly>

function LimitTextArea(field){ 
maxlimit=200; 
if (field.value.length > maxlimit) 
field.value = field.value.substring(0, maxlimit);
}

<textarea cols=50 rows=10 name="comment" id="commentarea" onKeyDown="LimitTextArea(this)" onKeyUp="LimitTextArea(this)" onkeypress="LimitTextArea(this)" ></textarea>

title="Die Breite des Textbereichs muss weniger als 300 Zeichen betragen." Bei der Platzierung im Textbereich werden Sie zur Eingabe der maximalen Anzahl von Bytes aufgefordert.

Zum Beispiel:

<textarea title="The textarea width must less than 300 characters." cols=50 rows=10 name="comment" id="commentarea" onKeyDown="LimitTextArea(this)" onKeyUp="LimitTextArea(this)" onkeypress="LimitTextArea(this)" ></textarea>