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:141753Durchsuche
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
$(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 
<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!