Bagaimana jQuery mengira bilangan perkataan dalam kotak teks dan mengehadkan bilangan perkataan dalam kotak teks

Bagaimana jQuery mengira bilangan perkataan dalam kotak teks dan mengehadkan bilangan perkataan dalam kotak teks_jquery

WBOY

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

asal

1193 orang telah melayarinya

Aksara Cina dikira sebagai dua, simbol atau nombor dalam bahasa Inggeris dikira sebagai satu. (Jika 140 perkataan dinyatakan, darab dengan 2, maka ia akan menjadi 280). Kaedah Math.ceil perlu digunakan, kerana pada akhirnya ia masih perlu dibahagikan dengan 2 untuk memulihkan bilangan perkataan yang dipaparkan kepada pengguna;

$(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") 
} 
} 
}) 
})

Salin selepas log masuk

1. Fungsi:

Pengiraan dilakukan semasa pengguna menaip, memberitahu pengguna berapa banyak perkataan yang tinggal untuk dimasukkan;

Apabila bilangan perkataan yang ditentukan melebihi, klik OK dan kotak input akan berkelip

2. Analisis fungsian

Peristiwa apakah yang menjadi perkara utama?

Pelayar standard menggunakan oninput, manakala IE menggunakan onpropertychange Syarat untuk berlakunya kedua-dua peristiwa ini ialah nilai kotak teks berubah.

Pengiraan bilangan perkataan.

Warna latar belakang kilat

Operasi modular digunakan di sini, kerana ia adalah tindakan berulang Kali pertama terdapat warna, dan kali kedua tiada warna Dengan cara ini, tindakan berulang akan mempunyai kesan berkelip.

Oleh kerana mata kasar perlu melihat warna dan kesan tidak berwarna kali ini, delay, setTimeout dan setInterval diperlukan di sini kerana tindakan itu perlu diulang.

Kod berikut memperkenalkan cara menggunakan jQuery untuk melaksanakan kotak teks yang mengehadkan bilangan perkataan input.

1. Import fail .js luaran:

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

Salin selepas log masuk

2. Tambahkan kod berikut pada teg

3. Jika terdapat teks lalai dalam kotak input apabila halaman dimuatkan, kod jQuery berikut mesti dijalankan apabila halaman dimuatkan untuk memaparkannya dengan betul:

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

Salin selepas log masuk