• Maximum length of input characters can be restricted
• Character interception speed can be set
• Customizable hint message text style (can improve custom text content)
This plugin counts English characters and the length of Chinese is the same.
Less nonsense, here directly to the detailed plug-in code, specific implementation details have been commented in the code:
Copy Code code as follows:
; (function ($) {
$.fn.extend ({
Textareacount:function (options) {
var $textArea = this;
Options = $.extend ({
maxlength:140,//define 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;",//hint info display style
Msgnumstyle: "Font-weight:bold;color:gray;font-style:italic;font-size:larger"///hint of the remaining length of the message inside the style
}, Options);
var $msg = $ ("<div style= '" + Options.msgstyle + "' ></div>");
Dynamically load a message container behind the text box
$textArea. After ($msg);
Add KeyPress event to determine whether the current content can be entered
$textArea. KeyPress (function (e) {
8 is the backspace key, 46 is the DELETE key
If the currently available character length is 0 and the key value is not 8 and 46, no action is made
if ($textArea. val (). length >= options.maxlength && e.which!= ' 8 ' && e.which!= ' 46 ') {
E.preventdefault ();
Return
}
The. KeyUp (function () {//Add KeyUp event is used to calculate the remaining input words and display
var curlength = this.value.length;
$msg. HTML (""). HTML ("also can enter <span style= '" + Options.msgnumstyle + "' >" + (options.maxlength-curlength) + "</span& gt; word ");
var init = setinterval (function () {
If the input is greater than the maximum length of the setting, 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 ("also can enter <span style= '" + Options.msgnumstyle + "' >" + options.maxlength + "</span> word");
}
else {
Clearinterval (init);
}
}, Options.speed);
}. Bind ("ContextMenu", function (e) {//Disable right mouse button to prevent text from being manipulated by mouse
return false;
});
First load now can enter character length hint information
$msg. HTML (""). HTML ("also can enter <span style= '" + Options.msgnumstyle + "' >" + options.maxlength + "</span> word");
return this;
}
});
}) (JQuery);
Save the above code copy directly to Jquery.textareacounter.js.
Demo:
Now let's take a look at how to use the plug-in, first to reference the plug-in, the code is as follows:
Copy Code code 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 Code code 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> Please input your evaluation:</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>
Invoke the plug-in to implement the character restriction feature of the text box control TXTCMT, script code:
Copy Code code as follows:
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("#txtCmt"). Textareacount ({maxlength:200, speed:256});
});
</script>
Note: To use the plug-in, call the Textareacount () method, and you can set the options parameter for the method.
Options parameter Description:
MaxLength: Set the maximum number of input characters
Speed: Set the speed of intercepting characters
Msgstyle: Set the style of the text hint message theme
Msgnumstyle: Sets the style of the number of characters remaining in the text hint message
The final effect of using the plugin:
