문자 입력 수 제한 기능 (jquery 버전 및 Native JS 버전)_jquery

알려진 버그:
Ubuntu 시스템에서 onkeyup 이벤트가 실패합니다. 자세한 내용은 Ubuntu 시스템에서 중국어 입력에 대한 onkeyup/onkeydown 실패 버그데모 보기: 여기를 클릭하세요. 데모 보기
핵심 코드:

코드 복사 코드는 다음과 같습니다.

//네이티브 JavaScript 버전
window.onload=function(){
var js=document.getElementById('js');//텍스트 필드 가져오기
var info=document.getElementsByTagName('p ')[0];//정보 요소를 삽입하라는 메시지 표시
var submit=info.getElementsByTagName('input')[0];//제출 버튼 가져오기
var max=js.getAttribute(' maxlength');//제한된 입력의 최대 길이 가져오기
var Tips=document.createElement('span');//새 팁 범위 만들기
var val,cur,count,warn; >submit.disabled=true;//기본적으로 제출할 수 없습니다
tips .innerHTML='' 최대 ' 문자[중국어와 영어를 구분하지 않습니다. 문자]';
if(max){
js.onkeyup=js.onchange=function(){
submit.disabled=false; nodeName!='SPAN') info.appendChild(tips);//Avoid Every 팝업 메시지가 나타날 때마다 프롬프트 메시지가 삽입됩니다
count=info.getElementsByTagName('em')[0];//변환 입력 번호에 따른 영역
warn=info.getElementsByTagName('font')[0];/ /Subtitle
val=this.value;
cur=val.length
// (var i=0;i// if(val.charCodeAt(i)>255 ) cur =1;
// }
if(cur==0){ // 기본값 길이가 0인 경우 입력할 수 있는 숫자는 기본 maxlength 값이며, 제출은 불가능합니다. 이번에는
count.innerHTML = max;
submit.disabled=true;
warn.innerHTML='문자 수를 중국어와 영어로 구분하지 않습니다.'
}else if (cur < max) {//기본값이 제한 숫자보다 작을 때 입력할 수 있는 숫자는 max-cur
count.innerHTML = max - cur
warn.innerHTML=' 및 영문자';
}else{
count.innerHTML = 0;//기본값이 한도보다 크거나 같을 경우 프롬프트 메시지를 삽입하고 한도 내에서 값을 차단합니다
경고 .innerHTML='더 이상 입력이 없습니다!';
this.value=val.substring(0,max);//여기 앞의 this.value에는 변수 val을 사용할 수 없습니다. 더 이상 같은 값이 아닙니다.
}
}
}
}
//jQuery 버전 기준
$(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('keyupchange',function(){ //키업 및 변경 이벤트 바인딩
_submit.attr('disabled ' ,false);
if(_info.find('span').size()<1){//팝업할 때마다 프롬프트 메시지를 삽입하지 마세요
_info.append('' _max ' 문자[한자와 영문자를 구분하지 않음]')
}
_val=$(this).val();
_cur=_val.length;
_count=_info.find('em')
_warn=_info.find('font'); 🎜 >
if(_cur==0){//기본값 길이가 0인 경우, 입력할 수 있는 숫자는 기본 maxlength 값이며, 이때는 제출할 수 없습니다
_count.text( _max);
_submit.attr ('disabled',true);
}else if(_cur<_max){//기본값이 제한 개수보다 작은 경우 입력할 수 있는 개수는 최대입니다. -cur
_count.text(_max-_cur);
_warn.text('한자와 영문자를 구분하지 않습니다.')
}else{//기본값이 크거나 같은 경우 한계에 프롬프트 메시지를 삽입하고 한계 내의 값을 가로채십시오
_count.text (0)
_warn.text('더 이상 입력이 없습니다!')
$(this).val( _val.substring(0,_max));
}
})


온라인 테스트 코드:

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