JQuery-based code for calculating the number of words in a text box

I. functions:
1. the user inputs and computes at the same time to tell the user the remaining number of words that can be entered;
2. When the specified number of words is exceeded, click OK to make the input box pop up.
Ii. Function Analysis
1. What are the important events?
The standard browser uses oninput, while IE uses onpropertychange. The condition for the occurrence of these two events is that the value of the text box is changed.
2. Word Count calculation.
2.1 two Chinese characters, one symbol or number, and one English character. (If it is set to 140 words, multiply by 2, then it is 280 words)
2.2 The Math. ceil method is required, because the number of words displayed to the user must be restored by dividing it by 2;
3. Flashing background color
Here the modulo operation is used, because it is a repeated action, the first time there is a color, the second time there is no color, such repeated action, there is a flashing effect.
Because the naked eye needs to see the secondary effect of color and no color, the latency is required. setTimeout and setInterval. setInterval are used here, because repeated actions are required.

Thanks to the video of "Wonderful classroom"

Online Demo: http://demo.jb51.net/js/2012/myinputCount/
Package download: http://www.jb51.net/jiaoben/55149.html

Copy codeThe Code is as follows: $ (function (){
Var $ tex = $ (". tex ");
Var $ but = $ (". ");
Var ie = jQuery.support.html Serialize;
Var str = 0;
Var abcnum = 0;
Var Max num = 280;
Var texts = 0;
Var num = 0;
Var sets = null;
$ Tex. val ("");
// The prompt text on the top
$ Tex. focus (function (){
If ($ tex. val () = ""){
$ ("P" ).html ("the number of words you can enter <span> 140 </span> ");
}
})
$ Tex. blur (function (){
If ($ tex. val () = ""){
$ ("P" ).html ("Enter your text below :");
}
})
// Text box word count calculation and prompt change
If (ie ){
$ Tex [0]. oninput = changeNum;
} Else {
$ Tex [0]. onpropertychange = changeNum;
}
Function changeNum (){
// Number of Chinese Characters
Str = ($ tex. val (). replace (/\ w/g, ""). length;
// Number of non-Chinese Characters
Abcnum = $ tex. val (). length-str;
Total = str * 2 + abcnum;
If (str * 2 + abcnum <maxNum | str * 2 + abcnum = maxNum ){
$ But. removeClass ()
$ But. addClass ("");
Texts = Math. ceil (maxNum-(str * 2 + abcnum)/2 );
$ ("P" ).html ("the number of words you can enter <span>" + texts + "</span>" ..children().css ({"color": "blue "});
} Else if (str * 2 + abcnum> maxNum ){
$ But. removeClass ("")
$ But. addClass ("gray ");
Texts = Math. ceil (str * 2 + abcnum)-maxNum)/2 );
$ ("P" ).html ("the number of words you entered exceeds <span>" + texts + "</span> "). children ("span" ).css ({"color": "red "});
}
}
// Click the button
$ But. click (function (){
If ($ (this). is (". gray ")){
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 ")
}
}
})
})