首页>>表单>>textarea 显示限制输入字符(2017-09-25)

textarea 显示限制输入字符

textarea 显示限制输入字符
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <form id="testForm" class="form-horizontal">  
  2.     <div class="form-group">  
  3.         <label class="col-md-3 control-label">反馈</label>  
  4.         <div class="col-md-6">  
  5.             <textarea class="form-control" name="test" onkeyup="textAreaChange(this)" onkeydown="textAreaChange(this)" rows="5"></textarea>  
  6.             <div class="text-right">  
  7.                 <em style="color:red">200</em>/<span>200</span>  
  8.             </div>  
  9.         </div>  
  10.     </div>  
  11.     <div class="form-group">  
  12.         <div class="col-md-offset-3 col-md-6">  
  13.             <button type="button" class="btn btn-info" id="testConfirm">确认提交</button>  
  14.         </div>  
  15.     </div>  
  16. </form>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2.     //显示限制输入字符method  
  3.     function textAreaChange(obj){  
  4.         var $this = $(obj);  
  5.         var count_total = $this.next().children('span').text();  
  6.         var count_input = $this.next().children('em');  
  7.         var area_val = $this.val();  
  8.         if(area_val.len()>count_total){  
  9.             area_val = autoAddEllipsis(area_val,count_total);//根据字节截图内容  
  10.             $this.val(area_val);  
  11.             count_input.text(0);//显示可输入数  
  12.         }else{  
  13.             count_input.text(count_total - area_val.len());//显示可输入数  
  14.         }  
  15.     }  
  16.     //得到字符串的字节长度  
  17.     String.prototype.len = function(){  
  18.         return this.replace(/[^x00-xff]/g, "xx").length;  
  19.     };  
  20.     /* 
  21.      * 处理过长的字符串，截取并添加省略号 
  22.      * 注：半角长度为1，全角长度为2 
  23.      * pStr:字符串 
  24.      * pLen:截取长度 
  25.      * return: 截取后的字符串 
  26.      */  
  27.     function autoAddEllipsis(pStr, pLen) {  
  28.         var _ret = cutString(pStr, pLen);  
  29.         var _cutFlag = _ret.cutflag;  
  30.         var _cutStringn = _ret.cutstring;  
  31.         return _cutStringn;  
  32.     }  
  33.     /* 
  34.      * 取得指定长度的字符串 
  35.      * 注：半角长度为1，全角长度为2 
  36.      * pStr:字符串 
  37.      * pLen:截取长度 
  38.      * return: 截取后的字符串 
  39.      */  
  40.     function cutString(pStr, pLen) {  
  41.         // 原字符串长度  
  42.         var _strLen = pStr.length;  
  43.         var _tmpCode;  
  44.         var _cutString;  
  45.         // 默认情况下，返回的字符串是原字符串的一部分  
  46.         var _cutFlag = "1";  
  47.         var _lenCount = 0;  
  48.         var _ret = false;  
  49.         if (_strLen <= pLen/2){_cutString = pStr;_ret = true;}  
  50.         if (!_ret){  
  51.             for (var i = 0; i < _strLen ; i++ ){  
  52.                 if (isFull(pStr.charAt(i))){_lenCount += 2;}  
  53.                 else {_lenCount += 1;}  
  54.                 if (_lenCount > pLen){_cutString = pStr.substring(0, i);_ret = true;break;}  
  55.                 else if(_lenCount == pLen){_cutString = pStr.substring(0, i + 1);_ret = true;break;}  
  56.             }  
  57.         }  
  58.         if (!_ret){_cutString = pStr;_ret = true;}  
  59.         if (_cutString.length == _strLen){_cutFlag = "0";}  
  60.         return {"cutstring":_cutString, "cutflag":_cutFlag};  
  61.     }  
  62.     /* 
  63.      * 判断是否为全角 
  64.      * 
  65.      * pChar:长度为1的字符串 
  66.      * return: true:全角 
  67.      *         false:半角 
  68.      */  
  69.     function isFull (pChar){  
  70.         if((pChar.charCodeAt(0) > 128)){return true;}  
  71.         else{return false;}  
  72.     }  
  73. </script>  

 


原文地址:http://www.freejs.net/article_biaodan_638.html