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

•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:

Please enter your review:

< ;/div>

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:

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn