Code to calculate the number of words in a text box based on jQuery_jquery

1. Function:
1. The calculation is performed while the user is typing, telling the user how many words are left to input;
2. When the specified number of words is exceeded, click OK and the input box will flash
2. Functional Analysis
1. What events are the key points?
Standard browsers use oninput, while IE uses onpropertychange. The conditions for the occurrence of these two events are that the value of the text box changes.
　2. Calculation of word count.
2.1 One Chinese character counts as two, one symbol or number, and English character counts as one. (If 140 characters are specified, multiply by 2, then it will be 280)
2.2 You need to use the Math.ceil method, because in the end you still have to divide by 2 to restore the number of words displayed to the user;
3. Flash Dynamic background color
Modular operation is used here, because it is a repeated action. The first time there is color, and the second time there is no color. Such repeated actions will have a flashing effect.
Because the naked eye needs to see this The secondary effects are color and colorless, so delay, setTimeout and setInterval are needed. SetInterval is used here because the action needs to be repeated.

Thanks to "Wiaowei Classroom" for the video

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

Copy code The code is as follows:

$(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("" );
//Tip text at the top
$tex.focus(function(){
if($tex.val()==""){
$("p"). html("The number of characters you can also enter140");
}
})
$tex.blur(function(){
if($tex. val() == ""){
$("p").html("Please enter your text below:");
}
})
//Number of words in the text box Calculate and prompt changes
if(ie){
$tex[0].oninput = changeNum;
}else{
$tex[0].onpropertychange = changeNum;
}
function changeNum(){
//The number of Chinese characters
str = ($tex.val().replace(/w/g,"")).length;
//Non-Chinese characters Number
abcnum = $tex.val().length-str;
total = str*2 abcnum;
if(str*2 abcnum$but.removeClass()
$but.addClass("but");
texts =Math.ceil((maxNum - (str*2 abcnum))/2);
$( "p").html("You can also enter the number of words" texts "").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("The number of words you entered exceeds " texts "").children("span").css ({"color":"red"});
}
}
//Button click
$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")
}
}
})
})