text box word limit function jquery plugin _jquery

Source: Internet
Author: User
Later, wandering on the internet suddenly found a better text box word limit of the jquery plugin, simple and easy to use
The effect of the following figure

Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> about text box word limit function </tit le>
<script type= "Text/javascript" src= "jquery-1.2.6.min.js" ></script>
<script type= "text /javascript "src=" maxlength.js "></script>
<body>
<p>enter your Hobbie S (<50 characters) </p>
<textarea style= "width:300px" height:150px data-maxsize= "data-output=" Status1 "wrap=" virtual "></textarea><br/>
<div id=" Status1 "style=" Width:300px;font-weight: Bold;text-align:right "></div><br/>
<p>enter Your postal code (<6 characters) </p> <input type= "text" name= "T1" size= "" data-maxsize= "6" >
</body>

Attribute Explanation:

Data-maxsize: The maximum number of words that the text field can accept. (important)
Data-output: If you want to animate the number of words in a text box in real time, this property sets the span or div ID that displays the word count. (The color of the words will change with the quantity)
If you do not modify its source file, add a JS reference, you only need to give your own text or textarea plus data-maxsize attributes on it.
About setting maximum values dynamically
Use the Setformfieldsize method:
Setformfieldsize ($field, maxsize, Outputfieldid)
Attribute Explanation:
$field: The jquery object of the Restricted text box (refer to the jquery document).
MaxSize: As with data-maxsize, the maximum number of words that the text field can accept.
Outputfieldid: The same as data-output.
Example:
Copy Code code as follows:

<script type= "Text/javascript" >
JQuery (document). Ready (function ($) {//fire on DOM ready
Setformfieldsize (JQuery (' #comment '), ' Charsremain ')
//});
</script>

Executed when the interface is loaded.
Demo code Download Http://xiazai.jb51.net/200911/yuanma/textarea_maxlength.rar

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.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.