Heim >Web-Frontend >js-Tutorial >So steuern Sie die Anzahl der Wörter in jquery

So steuern Sie die Anzahl der Wörter in jquery

藏色散人
藏色散人Original
2021-11-11 10:15:141695Durchsuche

So steuern Sie die Anzahl der Wörter in jquery: 1. Importieren Sie externe js-Dateien. 2. Fügen Sie „$(“#txt“).keyup(function(){...}“ und andere Codes im

hinzu ; Tag; 3. Führen Sie einfach den jQuery-Code aus, wenn die Seite geladen wird. Die Betriebsumgebung dieses Artikels: Windows 7-System, JQuery-Version 1.2.6, DELL G3-Computer Wörter in jQuery?

jQuery berechnet die Anzahl der Wörter im Textfeld und begrenzt die Methode für die Anzahl der Zeichen im TextfeldSo steuern Sie die Anzahl der Wörter in jquery

Ein chinesisches Zeichen wird als zwei gezählt, ein Symbol oder eine Zahl wird im Englischen als eins gezählt (Wenn 140 Zeichen angegeben sind, multiplizieren Sie es mit 2, dann sind es 280), da die Math.ceil-Methode erforderlich ist. Am Ende muss durch 2 geteilt werden, um die Anzahl der dem Benutzer angezeigten Wörter wiederherzustellen.

$(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. Funktion:

Gleichzeitig wird die Benutzereingabeberechnung durchgeführt und dem Benutzer mitgeteilt, wie viele Wörter noch eingegeben werden müssen.

Wenn die angegebene Anzahl von Wörtern überschritten ist, klicken Sie abschließend auf OK, um die Eingabe vorzunehmen Das Eingabefeld blinkt

2. Funktionsanalyse So steuern Sie die Anzahl der Wörter in jquery

Welches Ereignis ist der zu verwendende Schlüssel? Standardbrowser verwenden oninput, während IE onpropertychange verwendet

Berechnung der Anzahl der Wörter

Ein Symbol oder eine Zahl im Englischen wird als eins gezählt (wenn es 140 Wörter sind, multiplizieren Sie es mit 2, dann müssen Sie die .ceil-Methode verwenden). Am Ende muss es noch durch 2 geteilt werden, um die Anzahl der dem Benutzer angezeigten Wörter wiederherzustellen.

Blinkende Hintergrundfarbe

Hier wird ein modularer Betrieb verwendet, da es sich um eine wiederholte Aktion handelt. Beim ersten Mal gibt es Farbe, beim zweiten Mal Es gibt keine Farbe, solche wiederholten Aktionen haben einen blinkenden Effekt.

Da die Farbe und der farblose Effekt dieses Mal sichtbar sein müssen, werden hier Verzögerung, SetTimeout und SetInterval verwendet, da dies erforderlich ist Wiederholen Sie die Aktion

Der folgende Code stellt vor, wie man mit jQuery ein Textfeld implementiert, das die Anzahl der Eingabezeichen begrenzt:

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

2. 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. Wenn beim Laden der Seite Standardtext im Eingabefeld angezeigt wird, muss beim Laden der Seite der folgende jQuery-Code ausgeführt werden, um ihn korrekt anzuzeigen:

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

Empfohlenes Lernen: „

jQuery-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo steuern Sie die Anzahl der Wörter in jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn