Maison > Article > interface Web > Comment contrôler le nombre de mots dans jquery
Comment contrôler le nombre de mots dans jquery
- 藏色散人original
- 2021-11-11 10:15:141647parcourir
Comment contrôler le nombre de mots dans jquery : 1. Importez des fichiers js externes ; 2. Ajoutez "$("#txt").keyup(function(){...}" et d'autres codes dans le
L'environnement d'exploitation de cet article : système Windows 7, jquery version 1.2.6, ordinateur DELL G3
Comment contrôler le nombre de mots dans jquery ?
jQuery calcule le nombre de mots dans la zone de texte et limite la méthode pour le nombre de caractères dans la zone de texte
Un caractère chinois compte pour deux, un symbole ou un chiffre compte pour un en anglais (s'il est spécifié comme 140 caractères, multipliez par 2, alors il fait 280), car la méthode Math.ceil est nécessaire au final, il faut diviser par 2 pour restituer le nombre de mots affichés à l'utilisateur ;
$(function(){
var $tex = $(".tex");
var $but = $(".but");
var ie = jQuery.support.htmlSerialize;
var str = 0;
var abcnum = 0;
var maxNum = 280;
var texts= 0;
var num = 0;
var sets = null;
$tex.val("");
//顶部的提示文字
$tex.focus(function(){
if($tex.val()==""){
$("p").html("您还可以输入的字数<span>140</span>");
}
})
$tex.blur(function(){
if($tex.val() == ""){
$("p").html("请在下面输入您的文字：");
}
})
//文本框字数计算和提示改变
if(ie){
$tex[0].oninput = changeNum;
}else{
$tex[0].onpropertychange = changeNum;
}
function changeNum(){
//汉字的个数
str = ($tex.val().replace(/\w/g,"")).length;
//非汉字的个数
abcnum = $tex.val().length-str;
total = str*2+abcnum;
if(str*2+abcnum<maxNum || str*2+abcnum == maxNum){
$but.removeClass()
$but.addClass("but");
texts =Math.ceil((maxNum - (str*2+abcnum))/2);
$("p").html("您还可以输入的字数<span>"+texts+"</span>").children().css({"color":"blue"});
}else if(str*2+abcnum>maxNum){
$but.removeClass("")
$but.addClass("grey");
texts =Math.ceil(((str*2+abcnum)-maxNum)/2);
$("p").html("您输入的字数超过了<span>"+texts+"</span>").children("span").css({"color":"red"});
}
}
//按钮点击
$but.click(function(){
if($(this).is(".grey")){
sets = setInterval(flash,100);
$tex.addClass("textColor")
}
function flash(){
num++;
if(num == 4){
clearInterval(sets);
}
if(num%2 == 1){
$tex.addClass("textColor")
}else{
$tex.removeClass("textColor")
}
}
})
})1. Fonction :
Le calcul de la saisie utilisateur est effectué en même temps, indiquant à l'utilisateur combien de mots il reste à saisir
Lorsque le nombre de mots spécifié est dépassé Enfin, cliquez sur OK pour valider ; la zone de saisie clignote
2. Analyse fonctionnelle
Quel événement est la clé à utiliser ?
Les navigateurs standards utilisent oninput, tandis qu'IE utilise onpropertychange Les conditions d'apparition de ces deux événements sont basées sur la zone de texte La valeur. changements.
Calcul du nombre de mots
Un symbole ou un nombre en anglais compte pour un (s'il s'agit de 140 mots, multipliez-le par 2, alors vous devez utiliser la méthode Math .ceil, car dans le). fin il faut encore le diviser par 2 pour restituer le nombre de mots affichés à l'utilisateur ;
Couleur de fond clignotante
Le fonctionnement modulaire est utilisé ici, car c'est une action répétée, la première fois il y a de la couleur, la deuxième fois il n'y a pas de couleur, de telles actions répétées auront un effet clignotant.
Parce que l'œil nu a besoin de voir la couleur et les effets incolores cette fois, delay, setTimeout et setInterval sont utilisés ici, car ils nécessitent de répéter l'action.
Le code suivant explique comment utiliser jQuery pour implémenter une zone de texte qui limite le nombre de caractères saisis
1 Importez un fichier .js externe :
<script src="http://static.l99.com/js/jquery/jquery-1.2.6.pack.js" type="text/javascript"></script>
2. Ajoutez le code suivant au
tag :<body>
还可以输入<span id="word">140</span>个字<br />
<textarea id="txt" name="" cols="" rows=""></textarea>
<script language="javascript" type="text/javascript">
$("#txt").keyup(function(){
if($("#txt").val().length > 140){
$("#txt").val( $("#txt").val().substring(0,140) );
}
$("#word").text( 140 - $("#txt").val().length ) ;
});
</script>
</body>3. S'il y a du texte par défaut dans la zone de saisie lors du chargement de la page, alors le code jQuery suivant doit être exécuté lors du chargement de la page pour l'afficher correctement :
$("#word").text( 140 - $("#txt").val().length ) ;Apprentissage recommandé : "Tutoriel vidéo jquery "
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!