<style>
/*demo CSS Tutorial * *
fieldset{border:1px solid #ccc; width:720px}
FieldSet legend{background: #a40000; color: #fff; text-align:center; padding:0 8px; MARGIN-LEFT:25PX}
FieldSet form{background: #eee; border:1px solid #ccc margin:10px padding:10px 10px 0}
FieldSet form textarea{width:670px; height:60px; border:1px solid #ccc; line-height:25px; padding:3px;overflow:hidden;}
FieldSet form textarea:focus{border:1px Solid #a40000}
FieldSet form p{height:30px margin:2px 0;*margin:3px 0 3px-5px}
FieldSet form P span{padding-left:8px}
FieldSet form P span em{font-style:normal; font-weight:bolder; color: #047; padding:0 3PX}
FieldSet form P span Font{color:blue font-size:10px}
</style>
<script>
/*******************************
* @author Mr.think
* @author Blog http://www.111cn.net/
* @2010.09.07
* Be free to reprint and use, but please specify the copyright ownership
*******************************/
Native JavaScript version
Window.onload=function () {
var Js=document.getelementbyid (' JS ');//Get text field
var info=document.getelementsbytagname (' P ') [0];//gets the element to insert the hint information
var submit=info.getelementsbytagname (' input ') [0];//Get Submit button
var max=js.getattribute (' maxlength ');//Get limit the maximum length of input
var tips tutorial =document.createelement (' span ');/create a new hint span
var Val,cur,count,warn;
submit.disabled=true;//Default non-commit
Tips.innerhtml= ' You can also enter <em> ' +max+ ' </em> characters <font>[do not distinguish between Chinese and English characters number]</font> ';
if (max) {
Js.onkeyup=js.onchange=function () {
Submit.disabled=false;
if (info.lastchild.nodename!= ' span ') info.appendchild (TIPS)//Avoid inserting a message every time it bounces
Count=info.getelementsbytagname (' em ') [0];//according to input number transform area
Warn=info.getelementsbytagname (' font ') [0];//subtitle
Val=this.value;
Cur=val.length;
for (var i=0;i<val.length; i++) {//This loop is used to determine Chinese-English characters, but it is not recommended
if (Val.charcodeat (i) >255) cur+=1;
// }
if (cur==0) {///when the default value is 0 o'clock, the number of entries is the default maxlength value, which is not submitted at this time
count.innerhtml = max;
Submit.disabled=true;
Warn.innerhtml= ' does not distinguish between Chinese and English characters number ';
}else if (cur < max) {////When the default value is less than the limit number, the number of entries can be max-cur
count.innerhtml = Max-cur;
Warn.innerhtml= ' does not distinguish between Chinese and English characters number ';
}else{
count.innerhtml = 0;//Inserts a hint message and intercepts the values within the limit number when the default value is greater than or equal to the limit
Warn.innerhtml= ' no more input! ';
This.value=val.substring (0,max)//The This.value in front of this argument cannot be used with variable Val, they are no longer the same value
}
}
}
}
Based on the jquery version
$ (function () {
var _area=$ (' Textarea#jq ');
var _info=_area.next ();
var _submit=_info.find (': Submit ');
var _max=_area.attr (' maxlength ');
var _val,_cur,_count,_warn;
_submit.attr (' disabled ', true);
_area.bind (' KeyUp change ', function () {//bind KeyUp and change events
_submit.attr (' disabled ', false);
if (_info.find (' span '). Size () <1) {//avoid inserting a message every time it bounces
_info.append (' <span> You can also enter <em> ' + _max + ' </em> character <font>[do not distinguish between Chinese and English characters number]</font></span > ');
}
_val=$ (This). Val ();
_cur=_val.length;
_count=_info.find (' em ');
_warn=_info.find (' font ');
if (_cur==0) {///when the default value is 0 o'clock, the number of entries is the default maxlength value, which is not submitted at this time
_count.text (_max);
_submit.attr (' disabled ', true);
}else if (_cur<_max) {////When the default value is less than the limit, the number of entries can be max-cur
_count.text (_max-_cur);
_warn.text (' No distinction between Chinese and English characters ');
}else{//when the default value is greater than or equal to the limit, insert a hint message and intercept the value within the limit number
_count.text (0);
_warn.text (' No more input! ');
$ (this). Val (_val.substring (0,_max));
}
});
});
</script>
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<body>
<div id= "D_head" >
</div>
Native JavaScript version
Window.onload=function () {
var Js=document.getelementbyid (' JS ');//Get text field
var info=document.getelementsbytagname (' P ') [0];//gets the element to insert the hint information
var submit=info.getelementsbytagname (' input ') [0];//Get Submit button
var max=js.getattribute (' maxlength ');//Get limit the maximum length of input
var tips=document.createelement (' span ');//Create a new hint span
var Val,cur,count,warn;
submit.disabled=true;//Default non-commit
Tips.innerhtml= ' You can also enter <em> ' +max+ ' </em> characters <font>[do not distinguish between Chinese and English characters number]</font> ';
if (max) {
Js.onkeyup=js.onchange=function () {
Submit.disabled=false;
if (info.lastchild.nodename!= ' span ') info.appendchild (TIPS)//Avoid inserting a message every time it bounces
Count=info.getelementsbytagname (' em ') [0];//according to input number transform area
Warn=info.getelementsbytagname (' font ') [0];//subtitle
Val=this.value;
Cur=val.length;
for (Var i=0;i<val.length; if (val.charcodeat (i) This loop is used to judge Chinese and English characters, but does not recommend doing that i++) {>255) cur+=1;
// }
if (cur==0) {///when the default value is 0 o'clock, the number of entries is the default maxlength value, which is not submitted at this time
count.innerhtml = max;
Submit.disabled=true;
Warn.innerhtml= ' does not distinguish between Chinese and English characters number ';
}else if (cur < max) {////When the default value is less than the limit number, the number of entries can be max-cur
count.innerhtml = Max-cur;
Warn.innerhtml= ' does not distinguish between Chinese and English characters number ';
}else{
count.innerhtml = 0;//Inserts a hint message and intercepts the values within the limit number when the default value is greater than or equal to the limit
Warn.innerhtml= ' no more input! ';
This.value=val.substring (0,max)//The This.value in front of this argument cannot be used with variable Val, they are no longer the same value
}
}
}
}
Based on the jquery version
$ (function () {
var _area=$ (' Textarea#jq ');
var _info=_area.next ();
var _submit=_info.find (': Submit ');
var _max=_area.attr (' maxlength ');
var _val,_cur,_count,_warn;
_submit.attr (' disabled ', true);
_area.bind (' KeyUp change ', function () {//bind KeyUp and change events
_submit.attr (' disabled ', false);
if (_info.find (' span '). Size () <1) {//avoid inserting a message every time it bounces
_info.append (' <span> You can also enter <em> ' + _max + ' </em> character <font>[do not distinguish between Chinese and English characters number]</font></span > ');
}
_val=$ (This). Val ();
_cur=_val.length;
_count=_info.find (' em ');
_warn=_info.find (' font ');
if (_cur==0) {//when the default value is 0 o'clock, the number of entries is the default maxlength value, is not committed at this time
_count.text (_max);
_submit.attr (' disabled ', true);
}else if (_cur<_max) {//when the default value is less than the limit, the number of entries is Max-cur
_count.text (_max-_cur);
_warn.text (' No distinction between Chinese and English characters ');
}else{//inserts a hint message and intercepts the values within the limit number when the default value is greater than or equal to the limit
_count.text (0);
_warn.text (' No more input! ');
$ (This). Val (_val.substring (0,_max));
}
});
});