Comment contrôler le nombre de mots dans jquery-js tutoriel-php.cn

Comment contrôler le nombre de mots dans jquery

藏色散人

Libérer： 2021-11-11 10:15:14

original

1653 Les gens l'ont consulté

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

Comment contrôler le nombre de mots dans jquery

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 ;

Comment contrôler le nombre de mots dans jquery

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

Copier après la connexion

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>

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, 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 ) ;

Copier après la connexion

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Comment contrôler le nombre de mots dans jquery