The jquery-based text box calculator implements Code. For more information, see
The Code is as follows:
/*
* Length Tracker
* V2.1.0
* Bind2Id: id of the element used to display Length changes
* Max: Maximum length
* MsgWrap: prompt message (a "-" Placeholder must be included)
* Eg: $ ('# input'). lenTracer ({bind2Id: 'mytracer', max: 150, msgWrap:' You can also enter-byte '});
* Author: liujg1015@gmail.com
*/
(Function ($ ){
Var zw_validate = function (el, option ){
This. el = $ (el );
This. bindEl = false;
This. setting = {
Bind2Id: false,
Max: 100,
MsgWrap: 'You can also enter-'
};
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 = _partten.exe c (_ 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: 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 );
1. There is a counter script above. You can paste the script into the js file and add references to the html file.
The Code is as follows:
Demo