Shulou(Shulou.com)06/02 Report--

Editor to share with you jquery how to control the number of words, I believe that most people do not know much, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!

Jquery control the number of words of the method: 1, import external js file; 2, in the tag "$(" # txt ") .keyup (function () {...}" and other code; 3, in the page load when the jQuery code can be run.

This article operating environment: windows7 system, jquery1.2.6 version, DELL G3 computer

The method of calculating and limiting the number of words in text boxes by jQuery

One Chinese is two, one symbol or number, English, one. (if it is 140 words, multiplied by 2, it is 280). You need to use the Math.ceil method, because at last you have to divide by 2 to restore the number of words displayed to the user.

$(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 (""); / / the prompt text at the top $tex.focus (function () {if ($tex.val () = ") {$(" p "). Html (" number of words you can enter ") }}) $tex.blur (function () {if ($tex.val () = ")) {$(" p ") .html (" Please enter your text below: ") / / text box word count and prompt to change if (ie) {$tex [0] .oninput = changeNum;} else {$tex [0] .onpropertychange = changeNum } function changeNum () {/ / the number of Chinese characters str = ($tex.val (). Replace (/\ wWeig, ")) .length; / / the number of non-Chinese characters abcnum = $tex.val (). Length-str; total = str*2+abcnum; if (str*2+abcnummaxNum) {$but.removeClass (") $but.addClass ("grey"); texts = Math.ceil (str*2+abcnum)-maxNum) / 2) Html ("you typed more words than" + texts+ "). Children (" span "). Css ({" color ":" red "});} / / button Click $but.click (function () {if ($(this) .is (" .words ")) {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. Function:

The user inputs and calculates at the same time, telling the user how many words are left to enter.

When the specified number of words is exceeded, click OK, which will make the input box flash.

II. Functional analysis

The point is, what event is used?

Standard browsers use oninput, while IE uses onpropertychange, and these two events occur when the value of the text box changes.

The calculation of the word count.

One Chinese is two, one symbol or number, English, one. (if it is 140 words, multiplied by 2, it is 280). You need to use the Math.ceil method, because at last you have to divide by 2 to restore the number of words displayed to the user.

Flashing background color

Modular operation is used here, because it is a repetitive action, the first time there is color, the second time there is no color, so repeated action, there is a flickering effect.

Because the naked eye wants to see the colored and colorless effects, we need to use delay, setTimeout and setInterval. SetInterval is used here because the action is repeated.

The following code introduces you to use jQuery to achieve a text box that limits the number of words you enter.

1. Import an external .js file:

two。 Add the following code to the tag:

You can also enter $("# txt") .keyup (function () {if ($("# txt"). Val (). Length > 140) {$("# txt"). Val ($("# txt"). Val (). Substring (0140);} $("# word"). Text (140-$("# txt"). Val (). Length);})

3. If there is default text in the input box when the page is loaded, run the following jQuery code when the page is loaded to display correctly:

$("# word"). Text (140-$("# txt"). Val (). Length); the above is all the content of the article "how jquery controls the number of words". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.