Implémenter la fonction de comptage du nombre de mots dans Textarea en JavaScript et de demander les caractères qui peuvent encore être saisis

Lorsque vous saisissez du texte dans la zone de texte, les caractères saisis seront automatiquement comptés et les caractères que l'utilisateur peut encore saisir seront affichés. En fait, cela peut également être implémenté avec js. un exemple ci-dessous

Les sites de microblogging populaires tels que Twitter ont une bonne expérience utilisateur Lors de la saisie de texte dans la zone de texte, les caractères saisis seront automatiquement comptés et les caractères que l'utilisateur peut encore saisir seront affichés. La limite est de 140 caractères. Dans votre microblog, ces petites astuces peuvent grandement améliorer l'expérience utilisateur.

Et si cette technologie était implémentée ? J'ai fait quelques recherches et j'ai découvert que la mise en œuvre est en fait assez simple. Quelques lignes de code peuvent compléter la fonction statistique Caractère d'entrée. son effet sur le texte Les statistiques sont exactement les mêmes que celles de Twitter et d'autres microblogs. La méthode d'utilisation de

consiste à ajouter d'abord un span pour afficher le nombre de mots restant, puis à ajouter un événement onkeydown et onkeyup à la Textarea pour en appeler un autre. segment JavaScript, les paramètres appelés par la fonction sont span id et textarea id, puis innerHTML est utilisé en JavaScript pour renvoyer le nombre de mots restants calculé.

Code Javascript de base :

Le code est le suivant :

<span style="font-size:18px;"><script language="javascript"> 
function countChar(textareaName,spanName) 
{ 
document.getElementById(spanName).innerHTML = 140 - document.getElementById(textareaName).value.length; 
} 
</script> 
可以输入<span id="counter">140</span>字<br/> 
<textarea id="status" name="status" rows="6" cols="40" onkeydown=&#39;countChar("status","counter");&#39; 
onkeyup=&#39;countChar("status","counter");&#39;></textarea></span>

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!