Jquery中文網 www.4271936.live
Jquery中文網 >  jQuery  >  jquery 教程  >  正文 限制字符輸入數功能(jquery版和原生JS版)

限制字符輸入數功能(jquery版和原生JS版)

發布時間:2013-08-02   編輯:www.4271936.live
比較常用的限制字符輸入數功能(比如熱火超天的微博輸入框),用jQuery和原生JavaScript分別寫了一個.原生JavaScript注釋中有區分中英文字符的函數, 但個人并不建議這么做.
比較常用的限制字符輸入數功能(比如熱火超天的微博輸入框),用jquery和原生JavaScript分別寫了一個.原生JavaScript注釋中有區分中英文字符的函數, 但個人并不建議這么做. 已知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需刷新才能執行]

您可能感興趣的文章:
限制字符輸入數功能(jquery版和原生JS版)
放棄用你的InnerHTML來輸出HTML吧 jQuery Tmpl不詳細講解
js 禁止文本框輸入空格的代碼
javascript限制文本框textarea輸入字數的代碼
JavaScript鍵盤事件(開啟輸入法時)
常用js正則表達式驗證代碼
表單驗證插件 jQuery formValidator
jQuery數組處理詳解(含實例演示)
JS限制Textarea文本域字符個數的代碼分享(圖文)
jQuery源碼分析-02正則表達式 RegExp 常用正則表達式

[關閉]
湖南快乐十分app手机版 时时彩软件后一 邯郸爱配资网 江西快三哪个平台能玩 北京赛车pk拾 36选7好彩1 福彩3d安卓下载 湖南福彩快乐十分走势图爱乐彩 福彩北京快中彩走势图 炒股学习软件app