Jqyery and JavaScript limit character input function

Source: Internet
Author: User

Jqyery and Web page special effects limit character input number function

<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));
  }
 });
});

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.