首頁 > web前端 > js教程 > 一個基於jquery的文字方塊記數器_jquery

一個基於jquery的文字方塊記數器_jquery

WBOY
發布: 2016-05-16 17:49:48
原創
1091 人瀏覽過
複製程式碼 程式碼如下:

/*
*長度追蹤器
*v2. 1.0
*bind2Id:用於顯示長度變化的元素的id
*max:最大長度
*msgWrap:提示訊息(必須要有一個"-"佔位符)
*eg: $('#input').lenTracer({bind2Id:'myTracer',max:150,msgWrap:'您也可以輸入-個字元'});
*author:liujg1015@gmail.com
* /
(function ($) {
var zw_validate = function (el, option) {
this.el = $(el);
this.bindEl = false;
this.setting = {
bind2Id: false,
max: 100,
msgWrap: '您也可以輸入-個字元'
};
if (option) {
$.extend( this.setting, option);
this.init();
}
};
zw_validate.prototype = {
init: function () {
var _this = this;
this.bindEl = $('#' this.setting.bind2Id);
this.el.focus(function () { _this.start(); }).blur(function () { _this.dispose (); });
this.el.css({ paddingBottom: 20 });
this.initMsg();
},
initMsg: function () {
var wrap = this.setting.msgWrap.split('-');
this.bindEl.text(this.setting.max - this.count().total).before(wrap[0]).after(wrap[ 1]);
},
count: function () {
var _val = this.el.val();
var _len = _val.length;
var _rowCount = 0;
var _enterLen = 0;
var _partten = /n /g;
if (_len > 0 && _partten.test(_val)) {
_enterLen = 3;
while ((result🎜>_enterLen = 3;
while ((result = _partten.exec(_val)) != null) {
if ((result.index 1 _enterLen) > this.setting.max) {
break;
}
_enterLen = 3;
}
_rowCount = _val.match(_partten).length;
}
return { total: (_len _rowCount * 3), enterLen: _enterLen };
}
}
function () {
var _this = this;
_this.timer = setInterval(function () {
var _val = _this.el.val();
var _rlt = _this.count() ;
if (_rlt.total > _this.setting.max) {
if (_rlt.enterLen > 0) {
_this.el.val(_val.substr(0, _this.setting.max - _rlt.enterLen));
}
else {
_this.el.val(_val.substr(0, _this.setting.max));
}
_this.bindEl.text (_this.setting.max - _this.count().total);
return;
}
_this.bindEl.text(_this.setting.max - _rlt.total);
}, 300);
},
dispose: function () {
clearInterval(this.timer);
},
restore: function () {
this.bindEl.text( this.setting.max - this.el.val().length);
}
};
$.fn.extend({
lenTracer: function (option) {
return new zw_validate(this, option);
}
});
})(jQuery);

一、上面是計數器的腳本,可將腳本貼到js文件中,然後在html裡面加入引用。 複製代碼
代碼如下:




demo






tr>





標題




評論









二、上面的程式碼是展示如何使用。 這個計數器是自己用jQuery寫的,因此要依賴jQuery函式庫函數。能計算回車符,因為在textarea裡面的回車符提交到後台後是'rn'。歡迎批評、指正。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板