jQuery extension implements method to prompt how many bytes can be input in text-JS Tutorial-php.cn

jQuery extension implements method to prompt how many bytes can be input in text

高洛峰

Release： 2016-12-03 16:46:30

Original

1056 people have browsed it

The example in this article describes how to extend jQuery to realize text prompts on how many bytes can be input. Share it with everyone for your reference, as follows:

1. Add jQuery custom extension

$(function($){
  // tipWrap:  提示消息的容器
  // maxNumber:  最大输入字符
  $.fn.artTxtCount = function(tipWrap, maxNumber){
    var countClass = &#39;js_txtCount&#39;,  // 定义内部容器的CSS类名
    fullClass = &#39;js_txtFull&#39;,  // 定义超出字符的CSS类名
    disabledClass = &#39;disabled&#39;;  // 定义不可用提交按钮CSS类名
    // 统计字数
    var count = function(){
      var val = lenFor($.trim($(this).val()));
      if (val <= maxNumber){
       tipWrap.html(&#39;<span class="&#39; + countClass + &#39;">\u8FD8\u80FD\u8F93\u5165 <strong>&#39; + (maxNumber - val) + &#39;</strong> \u4E2A\u5B57\u8282</span>&#39;);
      }else{
       tipWrap.html(&#39;<span class="&#39; + countClass + &#39; &#39; + fullClass + &#39;">\u5DF2\u7ECF\u8D85\u51FA <strong>&#39; + (val - maxNumber) + &#39;</strong> \u4E2A\u5B57\u8282</span>&#39;);
      };
    };
    $(this).bind(&#39;keyup change&#39;, count);
    return this;
  };
});

Copy after login

Get the number of bytes function

var lenFor = function(str){
　　var byteLen=0,len=str.length;
　　if(str){
　　　　for(var i=0; i<len; i++){
　　　　　　if(str.charCodeAt(i)>255){
　　　　　　　　byteLen += 3;
　　　　　　}
　　　　　　else{
　　　　　　　　byteLen++;
　　　　　　}
　　　　}
　　　　return byteLen;
　　}
　　else{
　　　　return 0;
　　}
}

Copy after login

2. Instantiate

<script type="text/javascript">
// demo
$(function($){
  // 批量
  $(&#39;.autoTxtCount&#39;).each(function(){
    $(this).find(&#39;.text1&#39;).artTxtCount($(this).find(&#39;.tips&#39;), 108);
  });
});
</script>

Copy after login

3 .The corresponding html structure

<div class="form-group">
  <div class="col-sm-9">
    <label class="col-sm-1 control-label" for="form-field-1"> 内容: </label>
  </div>
</div>
<div style="padding-left:100px;" id="autoTxtCount" class="autoTxtCount form-group">
  <div >
    <textarea class="text1" name="content" cols="50" rows="3"><!--{$aData.content}--></textarea>
  </div>
  <div>
    <span class="tips"></span>
  </div>
</div>

Copy after login

4. Some styles

#autoTxtCount { width:500px; }
#autoTxtCount .help, #autoTxtCount .help a { color:#999; }
#autoTxtCount .tips { color:#999; padding:0 5px; }
#autoTxtCount .tips strong { color:#1E9300; }
#autoTxtCount .tips .js_txtFull strong { color:#F00; }
#autoTxtCount textarea.text1 { width:474px; }

Copy after login

The effect is as follows:

jQuery extension implements method to prompt how many bytes can be input in text