cari

Rumah >hujung hadapan web >tutorial js >Bagaimana jQuery mengira bilangan perkataan dalam kotak teks dan mengehadkan bilangan perkataan dalam kotak teks_jquery

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

WBOY
WBOYasal
2016-05-16 15:12:511231semak imbas

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

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.

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;

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>
2. Tambahkan kod berikut pada teg 6c04bd5ca3fcae76e30b72ad730ca86d


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>


Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Kaedah JS untuk memaparkan kemahiran kalendar dan weather_javascriptArtikel seterusnya：Kaedah JS untuk memaparkan kemahiran kalendar dan weather_javascript

Artikel berkaitan

Lihat lagi