快捷導(dǎo)航

ASP.NET jQuery 實(shí)例13 原創(chuàng)jQuery文本框字符限制插件-TextArea Counter

更新時(shí)間：2012年02月03日 17:20:39 作者：

這節(jié)介紹一個(gè)自己寫(xiě)的jQuery文本框字符限制插件，至于如何寫(xiě)插件，我這里就不多講了，可以查看相關(guān)介紹，這里主要介紹下該插件的功能

•可限制最大輸入字符長(zhǎng)度
•可設(shè)置字符截取速度
•可自定義提示信息文本樣式(可以改進(jìn)自定義文本內(nèi)容)
該插件統(tǒng)計(jì)英文字符和中文的長(zhǎng)度是一樣的。
廢話少說(shuō)，這里直接奉上詳細(xì)插件代碼，具體實(shí)現(xiàn)細(xì)節(jié)已經(jīng)在代碼里面有注釋?zhuān)?

復(fù)制代碼代碼如下:

 
; (function ($) { 
$.fn.extend({ 
textAreaCount: function (options) { 
var $textArea = this; 
options = $.extend({ 
maxlength: 140, // 定義一個(gè)最大輸入長(zhǎng)度變量,初始化為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;" // 提示信息里面剩余長(zhǎng)度的樣式 
}, options); 
var $msg = $("<div style='" + options.msgstyle + "'></div>"); 
// 在文本框框后面動(dòng)態(tài)加載一個(gè)提示信息容器 
$textArea.after($msg); 
// 添加keypress事件用來(lái)判斷當(dāng)前內(nèi)容是否還可輸入 
$textArea.keypress(function (e) { 
// 8是Backspace按鍵， 46是Delete按鍵 
// 如果當(dāng)前可輸入的字符長(zhǎng)度為0, 且按鍵值不是8和46，就不做任何操作 
if ($textArea.val().length >= options.maxlength && e.which != '8' && e.which != '46') { 
e.preventDefault(); 
return; 
} 
}).keyup(function () { // 添加keyup事件用來(lái)計(jì)算剩余輸入字并顯示 
var curlength = this.value.length; 
$msg.html("").html("還能輸入<span style='" + options.msgNumStyle + "'>" + (options.maxlength - curlength) + "</span>字"); 
var init = setInterval(function () { 
// 如果輸入的內(nèi)容大于設(shè)置的最大長(zhǎng)度，內(nèi)容按設(shè)置的速度自動(dòng)截取 
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) { // 禁止鼠標(biāo)右鍵，防止通過(guò)鼠標(biāo)操作文本 
return false; 
}); 
// 首次加載現(xiàn)在可輸入字符長(zhǎng)度提示信息 
$msg.html("").html("還能輸入<span style='" + options.msgNumStyle + "'>" + options.maxlength + "</span>字"); 
return this; 
} 
}); 
})(jQuery); 

直接把上面代碼復(fù)制保存到j(luò)query.textareacounter.js.
Demo:
現(xiàn)在我們來(lái)看下如何使用該插件，首先要引用該插件，代碼如下：

復(fù)制代碼代碼如下:

 
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> 
<script src="Scripts/jquery.textareacounter.js" type="text/javascript"></script> 

頁(yè)面結(jié)構(gòu)代碼：

復(fù)制代碼代碼如下:

 
<form id="form1" runat="server"> 
<div align="center"> 
<fieldset style="width: 400px; height: 250px"> 
<table cellpadding="3" cellspacing="3" border="0"> 
<tr> 
<td> 
<b>請(qǐng)輸入您的評(píng)價(jià)：</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> 

調(diào)用插件實(shí)現(xiàn)文本框控件txtCmt的字符限制功能，腳本代碼：

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
$(document).ready(function () { 
$("#txtCmt").textAreaCount({ maxlength: 200, speed: 256 }); 
}); 
</script> 

注：要使用該插件，調(diào)用textAreaCount()方法即可，可以設(shè)置該方法的options參數(shù)，
options參數(shù)說(shuō)明：
maxlength：設(shè)置最大輸入字符數(shù)量
speed：設(shè)置截取字符的速度
msgstyle：設(shè)置文本提示信息主題的樣式
msgNumStyle：設(shè)置文本提示信息里剩余字符數(shù)量的樣式
最終使用該插件后的效果圖：