Home > Developer > Web Develop
jquery implements the input text count function code:
In some of the more user-friendly message reply function, there is such a design, that is, when the input text, the ability to implement the counting function, you can prompt the user can also be able to input how much text, so that users can easily choose a more appropriate language description, the following is a piece of code to achieve this function, The friends you need can be used for reference.
The code is as follows:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.softwhy.com/" /><title>Ant Tribe</title><styletype= "Text/css">fieldset{width:800px;Margin-left:300px;}legend{Font-sixe:16px; }#num{font-size:28px;Font-weight: -}</style><Scripttype= "Text/javascript"src= "Mytest/jquery/jquery-1.8.3.js"></Script><Scripttype= "Text/javascript"> $(function(){ $("#content"). Focus (function(){ if($( This). Val ()== This. DefaultValue) { $( This). Val (""); }}). blur (function(){ if($( This). Val ()=="') { $( This). Val ( This. DefaultValue); } }) $("#content"). KeyUp (function(){ varWords_num= $ - $( This). val (). length; if(Words_num< 0) { $("Font"). CSS ('Color','Red'). Text (words_num); $( This). Val ($ ( This). Val (). substring (0,139)) } Else{ $("Font"). Text (words_num); } }) }); </Script> </Head> <Body> <fieldset> <legend>Publish Box</legend> <formAction="#"ID= "Form1">You can also enter<spanID= "num"><FontColor= "Green">140</Font></span>a word<textareacols= "The "rows= "8"ID= "Content">Ant Tribe welcomes You</textarea> <inputtype= "button"ID= "Send"value= "Publish"/> </form> </fieldset> </Body> </HTML>
The above code to achieve our requirements, you can achieve the input text countdown effect, the following describes its implementation process.
A. Code Comment:
1.$ (function () {}), the document structure is fully loaded and then executes the code in the function.
2.$ ("#content"). focus (function () {
if ($ (this). Val () ==this.defaultvalue) {
$ (this). Val ("");
}
})
Register the Focus event handler function for the text box, which determines whether the content in the text box is the default value, or if it is empty.
3.blur (function () {
if ($ (this). val () = = ") {
$ (this). Val (This.defaultvalue);
}
})
Register the Blur event handler for the text box, which determines whether the value of the text box is empty, and if so, sets the contents of the text box to the original default value.
4.$ ("#content"). KeyUp (function () {}), register the KeyUp event handler for the text box.
5.var Words_num = $ (this). Val (). Length, gets the number of text that can also be entered.
6.if (Words_num < 0) {
$ ("Font"). CSS (' Color ', ' red '). Text ("0");
$ (this). Val ($ (this). Val (). substring (0,139))
}
If the text is out of the box, set the text you can enter to 0, set it to red, and delete the text that you have exceeded.
7.else{
$ ("Font"). Text (words_num);
}
If not exceeded, displays the number of text that can also be entered.
two. Related reading:
1.focus events can be found injquery's Focus eventA chapter.
2.defaultValue properties can be found inJavaScript's Textarea.defaultvalue propertyA chapter.
The 3.val () function can be found in thethe Val () method of jqueryA chapter.
4.blur events can be found inthe Blur event of jqueryA chapter.
5.keyup events can be found inthe KeyUp event of jqueryA chapter.
The 6.css () function can be found in thejquery's CSS () methodA chapter.
The 7.text () function can be found in thethe text () method of jqueryA chapter.
The 8.substring () function can be found in thethe substring () method of a JavaScript string objectA chapter.
The original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=13362
For more information, refer to: http://www.softwhy.com/jquery/
The input text count function code implemented by jquery
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
