Home > Developer > JavaScript

JQuery calculates the number of words in the text box and limits the number of words in the text box.

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

JQuery calculates the number of words in the text box and limits the number of words in the text box.

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;

$ (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 ("the number of words you can enter <span> 140 </span>") ;}}) $ 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 | str * 2 + abcnum = maxNum) {$. removeClass () $. addClass ("but"); 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) {$. removeClass ("") $. 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 $. 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:

<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> enter <span id = "word"> 140 </span> characters <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 default text exists in the input box during page loading, run the following jQuery code During page loading to display the text correctly:

$("#word").text( 140 - $("#txt").val().length ) ;
Articles you may be interested in:
  • Text Box word limit function jquery plug-in
  • JQuery-based code for calculating the number of words in a text box
  • Jquery achieves text-box word-level code that can be entered using Sina Weibo.

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.

Related Keywords:
get the permalink number of words in sentence number of words in paragraph count number of words in word count number of words in sentence count number of words in string counting number of letters in words

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

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