Bagaimana untuk mengawal bilangan perkataan dalam jquery

Cara mengawal bilangan perkataan dalam jquery: 1. Import fail js luaran 2. "$("#txt").keyup(function(){...}" dalam

; teg, dsb. Kod; 3. Jalankan kod jQuery apabila halaman dimuatkan 1.2.6, komputer DELL G3

Bagaimanakah jquery mengawal bilangan perkataan

Bagaimanakah jQuery mengira bilangan perkataan dalam kotak teks dan mengehadkan bilangan perkataan? perkataan dalam kotak teks

Satu aksara Cina dikira sebagai dua, satu simbol atau nombor, Dalam bahasa Inggeris, kira satu (Jika ia adalah 140 aksara, darab dengan 2, maka ia adalah 280) Anda perlu menggunakan. Kaedah Math.ceil, kerana anda masih perlu membahagikan dengan 2 untuk memulihkan bilangan aksara yang dipaparkan kepada pengguna;

Fungsi:

Pengiraan input pengguna dilakukan pada masa yang sama, memberitahu pengguna berapa banyak perkataan yang tinggal untuk dimasukkan

Apabila had melebihi Selepas menetapkan bilangan perkataan, klik OK dan kotak input akan berkelip;

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

2. Analisis fungsian

Apakah peristiwa yang menjadi perkara utama

Pelayar standard menggunakan oninput, manakala IE menggunakan onpropertychange, syarat untuk berlakunya dua peristiwa ini ialah nilai kotak teks berubah

Bilangan aksara dikira sebagai dua, dan satu 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;

Operasi modular digunakan di sini, kerana ia adalah tindakan yang berulang kali pertama terdapat warna, dan kali kedua tiada tindakan yang berulang seperti itu akan mempunyai kesan berkelip.

Kerana telanjang. eye Untuk melihat warna dan kesan tidak berwarna kali ini, anda perlu menggunakan delay, setTimeout dan setInterval digunakan di sini kerana tindakan itu perlu diulang

Kod berikut diperkenalkan kepada anda kotak yang mengehadkan bilangan aksara input

1 Import fail .js luaran:

2

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

Pembelajaran yang disyorkan: "

Tutorial video jquery

》

Atas ialah kandungan terperinci Bagaimana untuk mengawal bilangan perkataan dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!