限制字符输入数功能(jQ版和原生JS版)

比较常用的限制字符输入数功能(比如热火超天的微博输入框),用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 )) ;
         }
     }) ;
}) ;

原文发布于Mr.Think的博客:  http://mrthink.net/js-jq-input-limit/