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 Textfeld
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")
}
}
})
})
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
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>
<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>
$("#word").text( 140 - $("#txt").val().length ) ;
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!