How to Use jQuery to calculate the number of words in a text box and limit the number of words in a text box _ jquery

Two Chinese characters, one symbol or number, and one English character are counted. (If it is set to 140 words, multiply by 2, then it is 280 words ). You need to use the Math. ceil method, because the number of words displayed to the user must be restored by dividing the last two. One Chinese character is counted as two, one symbol or number, and one English character is counted as one. (If it is set to 140 words, multiply by 2, then it is 280 words ). The Math. ceil method is required, because the number of words displayed to the user must be restored by dividing by 2;

$ (Function () {var $ tex = $ (". tex "); var $ but = $ (". but "); var ie = jQuery.support.html Serialize; var str = 0; var abcnum = 0; var maxNum = 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 ("You can also enter 140") ;}}) $ tex. blur (function () {if ($ tex. val () = "") {$ ("p" ).html ("Enter your text below :");}}) // calculated the number of words in the text box and prompts to 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; // The number of non-Chinese characters abcnum = $ tex. val (). length-str; total = str * 2 + abcnum; if (str * 2 + abcnum
 
  
MaxNum) {$. removeClass ("") $. addClass ("gray"); texts = Math. ceil (str * 2 + abcnum)-maxNum)/2); $ ("p" ).html ("the number of words you entered exceeds" + texts + ""). children ("span" ).css ({"color": "red"}) ;}// click $. 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 ")}}})})
 

I. functions:

The user inputs and calculates the remaining number of words;

When the specified number of words is exceeded, click OK to flash the input box

Ii. Function Analysis

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.

Number of words.

Two Chinese characters, one symbol or number, and one English character are counted. (If it is set to 140 words, multiply by 2, then it is 280 words ). The Math. ceil method is required, because the number of words displayed to the user must be restored by dividing by 2;

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.

The following Code introduces the text box that uses jQuery to limit the number of words entered.

1. Import the External. js file: