Home > Web Front-end > JS Tutorial > Function to limit the number of characters input (jquery version and native JS version)_jquery

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

WBOY
Release: 2016-05-16 18:20:08
Original
1146 people have browsed it

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:
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template