Beispielcode für JavaScript zur Implementierung eines Textbereichs, um die Anzahl der Eingabezeichen zu begrenzen

In diesem Artikel werden hauptsächlich die Prinzipien und Methoden von JS zur Implementierung von Textbereichen vorgestellt, um die Anzahl der Eingabewörter zu begrenzen. Es hat einen sehr guten Referenzwert, schauen wir uns den folgenden Editor an

Realisieren Sie den Textbereich, um die Anzahl der eingegebenen Zeichen zu begrenzen (einschließlich Chinesisch, es können nur 10 eingegeben werden, und es kann vollständiger ASCII-Code eingegeben werden 20)

Textarea wird als Textbereich bezeichnet, auch Textbereich genannt, bei dem es sich um ein mehrzeiliges Texteingabesteuerelement mit Bildlaufleiste handelt. Es wird häufig in Übermittlungsformularen auf Webseiten verwendet. Im Gegensatz zur einzeiligen Textfeld-Textsteuerung 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 einschränken, wenn der Benutzer die Zwischenablage einfügt Wenn Sie Text mit der rechten Maustaste eingeben, 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 den Textbereich durch Tastenbetätigungsereignisse wie „Taste nach unten“, „Taste nach oben“ oder „Taste drücken“. . Die Eingabe kann das Einfügen der rechten Maustaste nicht verhindern. 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 kostenintensiv sein Extra, und es kann auch sein, dass Webseitenersteller möglicherweise nicht dazu bereit sind. 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 das Beurteilungsereignis ausgelöst. Dabei wird nur der Wert des überwachten Elements berücksichtigt Eingabe, damit es unser Ziel, die Anzahl der Wörter zu begrenzen, idealerweise erreicht. 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 Zeichen oder andere kleine Symbole) eingeben:

Code:

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

Um sicherer zu sein, sollten die Formulardaten natürlich auch vom Hintergrundskriptprogramm erneut überprüft werden. Wenn die Anzahl der Wörter die voreingestellte Anzahl überschreitet, werden sie entsprechend verarbeitet, um den Zweck der tatsächlichen Einschränkung zu erreichen die Anzahl der Wörter. (Ende)

Eine weitere Möglichkeit, die Anzahl der eingegebenen Zeichen im Textbereich zu begrenzen (nur 10 Zeichen können für Chinesisch eingegeben werden, und 20 Zeichen können für den vollständigen ASCII-Code eingegeben werden)

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

Verbleibende Wortzahl:

<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. Beim Platzieren 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>

Das obige ist der detaillierte Inhalt vonBeispielcode für JavaScript zur Implementierung eines Textbereichs, um die Anzahl der Eingabezeichen zu begrenzen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!