Solution au problème selon lequel textarea ne peut pas limiter le nombre de mots via les compétences maxlength attribue_javascript

Textarea est appelée zone de texte, également connue sous le nom de zone de texte, qui est un contrôle de saisie de texte multiligne avec barre de défilement. Elle est souvent utilisée dans les formulaires de soumission sur les pages Web. Contrairement au contrôle de texte de zone de texte sur une seule ligne, il ne peut pas limiter le nombre de mots via l'attribut maxlength. Pour cette raison, d'autres méthodes doivent être trouvées pour le limiter afin de répondre aux exigences prédéfinies.

L'approche habituelle consiste à utiliser le langage #scripting pour limiter le nombre de mots saisis dans le champ de texte de la zone de texte, ce qui est simple et pratique. Supposons que nous ayons une zone de texte avec un ID txta1. Nous pouvons limiter ses caractères de saisie au clavier à 10 caractères (caractères chinois ou autres caractères à petit angle) via le code suivant :

.

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

Son principe est de surveiller la zone de texte avec le numéro d'identification spécifié via l'événement keydown (appui sur une touche du clavier). Comme vous pouvez l'imaginer, il ne peut limiter la saisie au clavier que si l'utilisateur colle le texte dans le presse-papiers via la souris droite. bouton , il ne peut pas contrôler le nombre de mots.

Saisie via le clavier, seuls 10 caractères peuvent être saisis dans la zone de texte ci-dessus. Cependant, notre objectif n’a pas été atteint ! Copiez simplement du texte et essayez de le coller avec le bouton droit de la souris et voyez ce qui se passe.

Vous pouvez trouver d'autres scripts JS similaires à ceux ci-dessus sur Internet. Aussi excellents soient-ils, leurs principes sont les mêmes. Ils surveillent la saisie dans la zone de texte via des événements de frappe du clavier tels que keydown, keyup ou keypress. Empêcher le collage du bouton droit de la souris. Pour cette raison, si nous devons vraiment limiter le nombre de mots dans la zone de texte, nous devons ajouter un autre verrou à la page Web - en désactivant le bouton droit de la souris. Cela coûtera sans aucun doute un supplément, et. cela peut aussi être un problème pour le créateur de la page Web qui n'est pas nécessairement disposé à le faire. En fait, il existe un moyen plus simple, en utilisant l'attribut onpropertychange.

onpropertychange peut être utilisé pour juger la valeur d'un élément prédéterminé. Lorsque la valeur de l'élément change, l'événement de jugement sera déclenché. Seule la valeur de l'élément surveillé est concernée, en évitant la source de l'entrée, de sorte que. cela peut idéalement être Respecter notre limite de mots. Il appartient à la catégorie JS et peut être utilisé imbriqué dans le représentant de la zone de formulaire. Voici le code et le style d'effet. Vous pouvez tester l'entrée comme ci-dessus, et vous constaterez qu'elle atteint vraiment l'objectif : quoi qu'il arrive. La méthode est utilisée pour saisir, elle ne peut saisir que 100 caractères (caractères chinois ou autres caractères chinois) :

Code :

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

Bien sûr, afin d'être plus sécurisé, le script d'arrière-plan qui traite les données du formulaire doit également vérifier à nouveau les données soumises si le nombre de mots dépasse le nombre prédéfini, il sera traité en conséquence, afin d'atteindre l'objectif. de vraiment limiter le nombre de mots. (Fin)

Une autre façon de limiter le nombre de caractères saisis dans la zone de texte (y compris le chinois, seulement 10 peuvent être saisis et le code ASCII complet peut en saisir 20)

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

Il existe un autre moyen :

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="La largeur de la zone de texte doit être inférieure à 300 caractères." Lorsqu'elle est placée dans la zone de texte, elle demande le nombre maximum d'octets.

Par exemple :

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