ASP.NET jQuery 執行個體13 原創jQuery文字框字元限制外掛程式-TextArea Counter

•可限制最大輸入字元長度
•可設定字元截取速度
•可自訂提示資訊文本樣式(可以改進自訂常值內容)
該外掛程式統計英文字元和中文的長度是一樣的。
廢話少說，這裡直接奉上詳細外掛程式代碼，具體實現細節已經在代碼裡面有注釋： 複製代碼 代碼如下:; (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：設定文本提示資訊裡剩餘字元數量的樣式
最終使用該外掛程式後的：