ASP.NET jQuery Example 13 Original jQuery text box character limit plug-in-TextArea Counter

ASP.NET jQuery Example 13 Original jQuery text box character limit plug-in-TextArea Counter_jquery

WBOY

Release： 2016-05-16 17:56:32

Original

936 people have browsed it

•Can limit the maximum input character length
•Can set the character interception speed
•Customizable prompt information text style (customized text content can be improved)
This plug-in counts that the length of English characters and Chinese characters are the same .
Without further ado, here is the detailed plug-in code. The specific implementation details are already commented in the code:

Copy code The code is 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;", // Prompt information display style
msgNumStyle: "font-weight:bold;color :Gray;font-style:italic;font-size:larger;" // The remaining length style in the prompt message 
}, options); 
var $msg = $("
"); 
// Dynamically load a prompt information container behind the text box 
$textArea.after($msg); 
// Add keypress event Used to determine whether the current content can still be input 
$textArea.keypress(function (e) { 
// 8 is the Backspace button, 46 is the Delete button 
// If the current input character length is 0 , and the key value is not 8 and 46, no operation will be performed
if ($textArea.val().length >= options.maxlength && e.which != '8' && e.which != '46 ') { 
e.preventDefault(); 
return; 
} 
}).keyup(function () { // Add keyup event to calculate the remaining input words and display 
var curlength = this.value.length; 
$msg.html("").html("You can also enter " (options.maxlength - curlength) "< ;/span>Word"); 
var init = setInterval(function () { 
// If the input content is greater than the set maximum length, the content will be 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" options.maxlength "words"); 
} 
else { 
clearInterval(init); 
} 
}, options.speed); 
}).bind("contextmenu", function (e) { // Disable the right mouse button to prevent text manipulation through the mouse
return false; 
}); 
// When loading for the first time, you can now enter the character length prompt information 
$msg.html("").html("You can also enter  " options.maxlength "Word"); 
return this; 
} 
}); 
})(jQuery); 

directly Copy and save the above code to jquery.textareacounter.js.
Demo:
Now let’s take a look at how to use the plug-in. First, we must reference the plug-in. The code is as follows:

Copy code The code is as follows:

Page structure Code:

Copy code The code is as follows:

Call the plug-in to implement the character limit function of the text box control txtCmt, script code:

Copy code The code is as follows:

Note: To use this plug-in, just call the textAreaCount() method. You can set the options parameters of this method.
Options parameter description:
maxlength: Set the maximum number of input characters
speed: Set interception The speed of characters
msgstyle: Set the style of the text prompt message theme
msgNumStyle: Set the style of the remaining number of characters in the text prompt message
The final rendering after using this plug-in: