這節介紹一個自己寫的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元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
