Function to limit the number of characters input (jquery version and native JS version)_jquery

Known BUG:
Under the Ubuntu system, the onkeyup event fails. For details, see: The onkeyup/onkeydown failure bug for Chinese input under the Ubuntu system.
View the demo: Click here to view the DEMO
Core Code:

Copy code The code is as follows:

//Native JavaScript version
window. onload=function(){
var js=document.getElementById('js');//Get the text field
var info=document.getElementsByTagName('p')[0];//Get the prompt to insert Information elements
var submit=info.getElementsByTagName('input')[0];//Get the submit button
var max=js.getAttribute('maxlength');//Get the maximum length of the restricted input
var tips=document.createElement('span');//Create a new tip span
var val,cur,count,warn;
submit.disabled=true;//Cannot be submitted by default
tips .innerHTML='You can also enter ' max ' characters[does not distinguish between Chinese and English characters]';
if(max){
js.onkeyup=js.onchange=function(){
submit.disabled=false;
if(info.lastChild.nodeName!='SPAN') info.appendChild(tips);//Avoid every A prompt message will be inserted every time it pops up
count=info.getElementsByTagName('em')[0];//Convert the area according to the input number
warn=info.getElementsByTagName('font')[0];/ /Subtitle
val=this.value;
cur=val.length;
// for(var i=0;i// if(val.charCodeAt(i)>255) cur =1;
// }
if(cur==0){ // When the default value length is 0, the number that can be input is the default maxlength value, and submission cannot be made at this time
count.innerHTML = max;
submit.disabled=true;
warn.innerHTML='Does not distinguish between Chinese and English Number of characters';
}else if (cur < max) {//When the default value is less than the limit number, the number that can be entered is max-cur
count.innerHTML = max - cur;
warn. innerHTML='Does not distinguish between Chinese and English characters';
}else{
count.innerHTML = 0;//When the default value is greater than or equal to the limit, insert a prompt message and intercept the value within the limit
warn.innerHTML='No more input!';
this.value=val.substring(0,max);//The variable val cannot be used for this.value in front of here, they are no longer the same value
}
}
}
}
//Based on 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 prompt message every time you pop up
_info.append(' You can also enter ' _max ' characters[does not distinguish between Chinese and English characters]');
}
_val=$(this).val();
_cur=_val.length;
_count=_info.find('em');
_warn=_info.find('font');

if(_cur==0){//When the default value length is 0, the number that can be input is the default maxlength value, and submission cannot be made at this time
_count.text(_max);
_submit.attr ('disabled',true);
}else if(_cur<_max){//When the default value is less than the limit number, the number that can be input is max-cur
_count.text(_max-_cur);
_warn.text('Does not distinguish between Chinese and English characters');
}else{//When the default value is greater than or equal to the limit, insert a prompt message and intercept the value within the limit
_count.text (0);
_warn.text('No more input!');
$(this).val(_val.substring(0,_max));
}
});
});

Online test code:

<meta charset="gb2312"> <meta name="author" content="Mr.Think">