這節介紹一個自己寫的jQuery文本框字符限制插件，至于如何寫插件，我這里就不多講了，可以查看相關介紹，這里主要介紹下該插件的功能：
?可限制最大輸入字符長度
?可設置字符截取速度
?可自定義提示信息文本樣式(可以改進自定義文本內容)
該插件統計英文字符和中文的長度是一樣的。
廢話少說，這里直接奉上詳細插件代碼，具體實現細節已經在代碼里面有注釋：
; (
function
($) {
$.fn.extend({
textAreaCount:
function
(options) {
var
$textArea =
this
;
options = $.extend({
maxlength: 140,
//
定義一個最大輸入長度變量,初始化為500
speed: 15,
//
定義刪除字符的速度變量
msgstyle: "font-family:Arial;font-size:small;color:Gray;small;text-align:right;margin-top:3px;",
//
提示信息顯示樣式
msgNumStyle: "font-weight:bold;color:Gray;font-style:italic;font-size:larger;"
//
提示信息里面剩余長度的樣式
}, options);
var
$msg = $("<div style='" + options.msgstyle + "'></div>");
//
在文本框框后面動態加載一個提示信息容器
$textArea.after($msg);
//
添加keypress事件用來判斷當前內容是否還可輸入
$textArea.keypress(
function
(e) {
//
8是Backspace按鍵， 46是Delete按鍵
//
如果當前可輸入的字符長度為0, 且按鍵值不是8和46，就不做任何操作
if
($textArea.val().length >= options.maxlength && e.which != '8' && e.which != '46') {
e.preventDefault();
return
;
}
}).keyup(
function
() {
//
添加keyup事件用來計算剩余輸入字并顯示
var
curlength =
this
.value.length;
$msg.html("").html("還能輸入<span style='" + options.msgNumStyle + "'>" + (options.maxlength - curlength) + "</span>字");
var
init = setInterval(
function
() {
//
如果輸入的內容大于設置的最大長度，內容按設置的速度自動截取
if
($textArea.val().length > options.maxlength) {
$textArea.val($textArea.val().substring(0, options.maxlength));
$msg.html("").html("還能輸入<span style='" + options.msgNumStyle + "'>" + options.maxlength + "</span>字");
}
else
{
clearInterval(init);
}
}, options.speed);
}).bind("contextmenu",
function
(e) {
//
禁止鼠標右鍵，防止通過鼠標操作文本
return
false
;
});
//
首次加載現在可輸入字符長度提示信息
$msg.html("").html("還能輸入<span style='" + options.msgNumStyle + "'>" + options.maxlength + "</span>字");
return
this
;
}
});
})(jQuery);
直接把上面代碼復制保存到jquery.textareacounter.js.
Demo:
現在我們來看下如何使用該插件，首先要引用該插件，代碼如下：
<
script
src
="Scripts/jquery-1.4.1-vsdoc.js"
type
="text/javascript"
></
script
>
<
script
src
="Scripts/jquery.textareacounter.js"
type
="text/javascript"></
script
>
頁面結構代碼：
<
form
id
="form1"
runat
="server"
>
<
div
align
="center"
>
<
fieldset
style
="width: 400px; height: 250px"
>
<
table
cellpadding
="3"
cellspacing
="3"
border
="0"
>
<
tr
>
<
td
>
<
b
>
請輸入您的評價：
</
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
>
調用插件實現文本框控件txtCmt的字符限制功能，腳本代碼：
<
script
type
="text/javascript"
>
$(document).ready(
function
() {
$(
"
#txtCmt
"
).textAreaCount({ maxlength:
200
, speed:
256
});
});
</
script
>
注：要使用該插件，調用textAreaCount()方法即可，可以設置該方法的options參數，
options參數說明：
maxlength：設置最大輸入字符數量
speed：設置截取字符的速度
msgstyle：設置文本提示信息主題的樣式
msgNumStyle：設置文本提示信息里剩余字符數量的樣式
?
最終使用該插件后的效果圖：
如果你在使用中有什么好的建議，歡迎提出來。
?
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
