• Maximum length of input characters
• Character truncation speed can be set
• Customizable text styles of prompt information (improved custom text content)
This plug-in calculates the length of English characters and Chinese characters.
To put it bluntly, the detailed plug-in code is provided here. The specific implementation details have been commented in the Code:
Copy codeThe Code is as follows:; (function ($ ){
$. Fn. extend ({
TextAreaCount: function (options ){
Var $ textArea = this;
Options = $. extend ({
Maxlength: 140, // defines a maximum input length variable, initialized to 500
Speed: 15, // define the speed variable for deleting characters
Msgstyle: "font-family: Arial; font-size: small; color: Gray; small; text-align: right; margin-top: 3px ;", // display style of prompt information
MsgNumStyle: "font-weight: bold; color: Gray; font-style: italic; font-size: larger;" // The remaining length style in the prompt message
}, Options );
Var $ msg = $ ("<div style = '" + options. msgstyle + "'> </div> ");
// Dynamically load a prompt message container behind the text box
$ TextArea. after ($ msg );
// Add a keypress event to determine whether the current content can be entered.
$ TextArea. keypress (function (e ){
// 8 is the Backspace button and 46 is the Delete button
// If the input character length is 0 and the key value is not 8 or 46, no operation is performed.
If ($ textArea. val (). length> = options. maxlength & e. which! = '8' & e. which! = '46 '){
E. preventDefault ();
Return;
}
}). Keyup (function () {// Add a keyup event to calculate the remaining input words and display them
Var curlength = this. value. length;
$Msg.html ("" ).html ("You can also enter <span style = '" + options. msgNumStyle + "'>" + (options. maxlength-curlength) + "</span> word ");
Var init = setInterval (function (){
// If the input content is greater than the set maximum length, the content is automatically intercepted at the set speed
If ($ textArea. val (). length> options. maxlength ){
$ TextArea. val ($ textArea. val (). substring (0, options. maxlength ));
$Msg.html ("" ).html ("You can also enter <span style = '" + options. msgNumStyle + "'>" + options. maxlength + "</span> ");
}
Else {
ClearInterval (init );
}
}, Options. speed );
}). Bind ("contextmenu", function (e) {// right-click prohibited to prevent text operations by mouse
Return false;
});
// Prompt message indicating the length of characters that can be entered when loading for the first time
$Msg.html ("" ).html ("You can also enter <span style = '" + options. msgNumStyle + "'>" + options. maxlength + "</span> ");
Return this;
}
});
}) (JQuery );
Copy and save the above Code to jquery. textareacounter. js.
Demo:
Now let's take a look at how to use the plug-in. The Code is as follows:Copy codeThe Code is as follows: <script src = "Scripts/jquery-1.4.1-vsdoc.js" type = "text/javascript"> </script>
<Script src = "Scripts/jquery. textareacounter. js" type = "text/javascript"> </script>
Page Structure Code:Copy codeThe Code is as follows: <form id = "form1" runat = "server">
<Div align = "center">
<Fieldset style = "width: 400px; height: 250px">
<Table cellpadding = "3" cellspacing = "3" border = "0">
<Tr>
<Td>
<B> enter your rating: </B>
</Td>
</Tr>
<Tr>
<Td>
<Asp: TextBox ID = "txtCmt" runat = "server" TextMode = "MultiLine" Width = "300px" Rows = "5"> </asp: TextBox>
</Td>
</Tr>
</Table>
</Fieldset>
</Div>
</Form>
Call the plug-in to implement the character restriction function of the text box control txtCmt. script code:Copy codeThe Code is as follows: <script type = "text/javascript">
$ (Document). ready (function (){
$ ("# TxtCmt"). textAreaCount ({maxlength: 200, speed: 256 });
});
</Script>
Note: To use this plug-in, call the textAreaCount () method. You can set the options parameter of this method,
Options parameter description:
Maxlength: sets the maximum number of input characters.
Speed: sets the speed of intercepting characters.
Msgstyle: Set the style of the topic of the text prompt information.
MsgNumStyle: Set the style of the remaining characters in the text prompt information.
After the plug-in is used:
