Comment jQuery calcule le nombre de mots dans une zone de texte et limite le nombre de mots dans une zone de texte

Comment jQuery calcule le nombre de mots dans une zone de texte et limite le nombre de mots dans une zone de texte_jquery

WBOY

Libérer： 2016-05-16 15:12:51

original

1231 Les gens l'ont consulté

Un caractère chinois compte pour deux, un symbole ou un chiffre en anglais compte pour un. (Si 140 mots sont spécifiés, multipliez par 2, ce sera alors 280). Il faut utiliser la méthode Math.ceil, car au final il faut encore la 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") 
} 
} 
}) 
})

Copier après la connexion

1. Fonction :

Le calcul est effectué pendant que l'utilisateur tape, indiquant à l'utilisateur combien de mots il reste à saisir ;

Lorsque le nombre de mots spécifié est dépassé, cliquez sur OK et la zone de saisie clignote

2. Analyse fonctionnelle

Quel événement est le point clé ?

Les navigateurs standards utilisent oninput, tandis qu'IE utilise onpropertychange. Les conditions d'apparition de ces deux événements sont que la valeur de la zone de texte change.

Calcul du nombre de mots.

;

Couleur de fond du flash

Le fonctionnement modulaire est utilisé ici, car il s'agit d'une action répétée. La première fois il y a de la couleur, et la deuxième fois il n'y a pas de couleur. De cette façon, les actions répétées auront un effet clignotant.

Parce que l'œil nu a besoin de voir les effets de couleur et d'incolore cette fois, delay, setTimeout et setInterval sont nécessaires ici car l'action doit être répétée.

Le code suivant présente comment utiliser jQuery pour implémenter une zone de texte qui limite le nombre de mots saisis.

1. Importer un fichier .js externe :

<script src="http://static.l99.com/js/jquery/jquery-1.2.6.pack.js" type="text/javascript"></script>

Copier après la connexion

2. Ajoutez le code suivant à la balise

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

Copier après la connexion

3. S'il y a du texte par défaut dans la zone de saisie lors du chargement de la page, le code jQuery suivant doit être exécuté lors du chargement de la page pour l'afficher correctement :

$("#word").text( 140 - $("#txt").val().length ) ;

Copier après la connexion