ホームページ >ウェブフロントエンド >jsチュートリアル >jquery_jquery に基づくテキスト ボックス カウンタ

jquery_jquery に基づくテキスト ボックス カウンタ

WBOY
WBOYオリジナル
2016-05-16 17:49:481087ブラウズ
コードをコピー コードは次のとおりです:

/*
*長さトラッカー
* 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 (オプション) {
$.extend( this.setting , オプション);
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. settings.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 _rowCount = 0; var _enterLen = 0;
var _partten = /n /g;
if (_len > 0 && _partten.test(_val)) {
_enterLen = 3; .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 },
start: 関数() {
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.setting.max - _rlt.total); , 300);
},
dispose: function () {
clearInterval(this.timer);
restore: function () {
this. (this.setting.max - this.el.val().length);
}
};
$.fn.extend({
lenTracer: 関数 (オプション) {
return new zw_validate(this, option);
}
});


1スクリプトを js ファイルに貼り付け、html に参照を追加します。




コードをコピー

コードは次のとおりです。

頭> タイトル
;< /span>

>

;







2. 上記のコードはその使用方法を示しています。
このカウンタはjQueryを使って自作しているため、jQueryのライブラリ関数に依存しています。テキストエリアの復帰文字はバックグラウンドに送信された後は 'rn' になるため、復帰文字を計算できます。批判や修正は大歓迎です。
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。