已知BUG:
Ubuntu系統下, onkeyup事件失效,詳見: Ubuntu系統下onkeyup/onkeydown對中文輸入失效bug.
查看演示: 點此查看DEMO
核心代碼:
代碼如下:
//原生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');//新建一個提示span
var val,cur,count,warn;
submit.disabled=true;//默認不可提交
tips.innerHTML='你還可以輸入<em>'+max+'</em>個字符<font>[不區分中英文字符數]</font>';
if(max){
js.onkeyup=js.onchange=function(){
submit.disabled=false;
if(info.lastChild.nodeName!='SPAN') info.appendChild(tips);//避免每次彈起都會插入一條提示信息
count=info.getElementsByTagName('em')[0];//根據輸入數字變換區
warn=info.getElementsByTagName('font')[0];//副標題
val=this.value;
cur=val.length;
// for(var i=0;i<val.length; 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;//當默認值大於等於限制數時,插入一條提示信息並截取限制數內的值
warn.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('keyup change',function(){ //綁定keyup和change事件
_submit.attr('disabled',false);
if(_info.find('span').size()<1){//避免每次彈起都會插入一條提示信息
_info.append('<span>你還可以輸入<em>'+ _max +'</em>個字符<font>[不區分中英文字符數]</font></span>');
}
_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){//當默認值小於限制數時,可輸入數為max-cur
_count.text(_max-_cur);
_warn.text('不區分中英文字符數');
}else{//當默認值大於等於限制數時,插入一條提示信息並截取限制數內的值
_count.text(0);
_warn.text('不可再輸入!');
$(this).val(_val.substring(0,_max));
}
});
});
在線測試代碼:
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]