jquery calculates the number of text boxes and how to limit the number of words in a text box

jquery calculates the number of text boxes and how to limit the number of words in a text box _jquery

Last Update:2017-01-19 Source: Internet

Author: User

Tags setinterval

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

A Chinese count of two, a symbol or a number, English, count one. (If the rule is 140 words, multiplied by 2, then 280). You need to use the Math.ceil method, because the last thing is to divide by 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 tip text at the top $tex. Focus (function () {if ($tex. val () = = "") {$ ("P"). HTML ("You can also enter the word <span>140</span>"); 
$tex. blur (function () {if ($tex. val () = "") {$ ("P"). HTML ("Please enter your text below:"); 
////text box word count and hint change if (ie) {$tex [0].oninput = Changenum; 
}else{$tex [0].onpropertychange = Changenum; 
The number of function Changenum () {//kanji is 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 ("but"); 
Texts =math.ceil ((Maxnum-(Str*2+abcnum))/2); 
$ ("P"). HTML ("You can also enter the word number <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 ("You have entered more words than <span>" +texts+ "</span>"). 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")}})

First, Function:

User side input calculation at the same time, tell the user how many can be left to enter the number of words;

When more than the specified number of words, click OK, will make the input box flashing

Second, functional analysis

What is the focus of the event?

Standard browsers use Oninput, while IE uses onpropertychange, the condition of which is that the value of the text box changes.

The calculation of the word count.

Flashing background color

Here used the modulo operation, because it is repetitive action, the first color, the second no color, so repeated action, there will be flashing effect.

Because the naked eye wants to see these two times has the color and the color-free effect, therefore needs to use the delay, settimeout and setinterval. Here is the setinterval, because to repeat the action.

The following code introduces a text box that uses jquery to limit the number of words you enter.

1. Import external. js file:

<script src= "Http://static.l99.com/js/jquery/jquery-1.2.6.pack.js" type= "Text/javascript" ></script>

2. Add the following code to the <body> label:

<body>
can also enter <span id= word >140</span> <br/> <textarea id= "
txt" name= "cols=" "Rows=" ></textarea>
<script language= "javascript" type= "Text/javascript" >
$ ("#txt"). KeyUp (function () { 
if ($ ("#txt"). Val (). length > 140) {
$ ("#txt"). Val ($ ("#txt"). Val (). substring (0,140));
}
$ ("#word"). Text (140-$ ("#txt"). Val (). length);
</script>
</body>

3. If the page is loaded with the default text in the input box, you should run the following jquery code when the page is loaded to correctly display:

$ ("#word"). Text (140-$ ("#txt"). Val (). length);

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More