Exemple de code pour JavaScript pour implémenter une zone de texte afin de limiter le nombre de mots d'entrée

Cet article présente principalement les principes et méthodes de JS pour implémenter textarea afin de limiter le nombre de mots saisis. Il a une très bonne valeur de référence, jetons un coup d'œil avec l'éditeur ci-dessous

Réaliser une zone de texte pour limiter le nombre de caractères saisis (y compris le chinois, seulement 10 peuvent être saisis et le code ASCII complet peut être saisi 20)

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 textarea 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 presse-papiers. via le bouton droit de la souris, 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 zone de texte via des événements d'opération de touches du clavier tels que keydown, keyup ou keypress. La saisie ne peut pas 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. supplémentaire, et il se peut également que les créateurs de pages Web ne soient pas disposés à 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é. Il ne se soucie que de la valeur de l'élément surveillé, en évitant la source de l'élément surveillé. saisie, afin qu'il puisse atteindre idéalement notre objectif de limiter le nombre 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 petits symboles) :

Code :

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

Bien sûr, pour plus de sécurité, traitez les données du formulaire. Le programme de script en arrière-plan doit également vérifier à nouveau les données soumises. Si le nombre de mots dépasse le nombre prédéfini, elles seront traitées en conséquence, afin d'atteindre l'objectif de véritable limitation. 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>

Nombre de mots restants :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!