Wie jQuery die Anzahl der Wörter in einem Textfeld berechnet und die Anzahl der Wörter in einem Textfeld begrenzt

Wie jQuery die Anzahl der Wörter in einem Textfeld berechnet und die Anzahl der Wörter in einem Textfeld begrenzt_jquery

WBOY

Freigeben： 2016-05-16 15:12:51

Original

1226 Leute haben es durchsucht

Ein chinesisches Zeichen zählt als zwei, ein Symbol oder eine Zahl im Englischen zählt als eins. (Wenn 140 Wörter angegeben sind, multiplizieren Sie sie mit 2, dann sind es 280). Die Math.ceil-Methode muss verwendet werden, da sie am Ende noch durch 2 geteilt werden muss, 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") 
} 
} 
}) 
})

Nach dem Login kopieren

1. Funktion:

Die Berechnung wird durchgeführt, während der Benutzer tippt, und teilt dem Benutzer mit, wie viele Wörter noch eingegeben werden müssen;

Wenn die angegebene Anzahl von Wörtern überschritten wird, klicken Sie auf OK und das Eingabefeld blinkt

2. Funktionsanalyse

Welches Ereignis ist der entscheidende Punkt?

Standardbrowser verwenden oninput, während IE onpropertychange verwendet. Die Bedingungen für das Auftreten dieser beiden Ereignisse sind, dass sich der Wert des Textfelds ändert.

Berechnung der Wortzahl.

Flash-Hintergrundfarbe

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

Da dieses Mal die Farb- und Farbeffekte mit bloßem Auge sichtbar sein müssen, werden hier Verzögerung, SetTimeout und SetInterval verwendet, da die Aktion wiederholt werden muss.

Der folgende Code stellt vor, wie man mit jQuery ein Textfeld implementiert, das die Anzahl der Eingabewörter begrenzt.

1. Externe .js-Datei importieren:

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

Nach dem Login kopieren

2. Fügen Sie dem den folgenden Code hinzu:

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

Nach dem Login kopieren

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: