Copy codeThe 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.
Copy codeThe Code is as follows:
<Html>
<Head>
<Title> demo </title>
</Head>
<Body>
<Table>
<Tr>
<Td>
Title
</Td>
<Td>
<Input type = "text" id = "title"/>
<Span id = "titlelen"> </span>
</Td>
</Tr>
<Tr>
<Td>
Comment
</Td>
<Td>
<Textarea cols = "5" rows = "5" id = "comment"> </textarea>
<Span id = "commentlen"> </span>
</Td>
</Tr>
</Table>
<Script src = "../scripts/jquery. js" type = "text/javascript"> </script>
<Script src = "../scripts/lentracer. js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ('# Title). lenTracer ({bind2Id: titlelen, max: 50 });
$ ('# Comment). lenTracer ({bind2Id: commentlen, max: 200, msgWrap: 'remaining-word '});
});
</Script>
</Body>
</Html>
II. The above code shows how to use it.
This counter is written by yourself using jQuery, So it depends on the jQuery library function. Calculate the carriage return because the carriage return in textarea is '\ r \ n' after it is submitted to the background '. Thank you for your criticism and correction.