jQuery扩展实现text提示还能输入多少字节的方法

 更新时间:2016年11月28日 10:31:17   作者:巴霍巴利  
这篇文章主要介绍了jQuery扩展实现text提示还能输入多少字节的方法,涉及jQuery扩展及字符串操作相关技巧,需要的朋友可以参考下

本文实例讲述了jQuery扩展实现text提示还能输入多少字节的方法。分享给大家供大家参考,具体如下:

1.添加jQuery自定义扩展

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

获取字节数函数

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;
  }
}

2.实例化

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

3.相应的html结构

<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>

4.一些样式

#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; }

效果如下:

更多关于jQuery相关内容可查看本站专题:《jQuery扩展技巧总结》、《jQuery字符串操作技巧总结》、《jQuery操作xml技巧总结》、《jQuery常见经典特效汇总》、《jquery选择器用法总结》及《jQuery常用插件及用法总结

希望本文所述对大家jQuery程序设计有所帮助。

相关文章

  • jQuery模板技术和数据绑定实现代码

    jQuery模板技术和数据绑定实现代码

    如果你用过ASP.NET的数据绑定控件,也用过ASP或者JSP里那种通过输出HTML元素在页面上显示数据的方法,你就知道ASP.NET数据绑定控件有多么方便。如果能够将同样的功能在浏览器端用HTML和JavaScript实现,那该是多少美妙的事情。
    2010-05-05
  • 解决拦截器对ajax请求的拦截实例详解

    解决拦截器对ajax请求的拦截实例详解

    这篇文章主要介绍了解决拦截器对ajax请求的拦截实例详解的相关资料,需要的朋友可以参考下
    2016-12-12
  • Jquery写一个鼠标拖动效果实现原理与代码

    Jquery写一个鼠标拖动效果实现原理与代码

    近日项目中要做一个鼠标拖拽层的效果,于是手动使用Jquery做了一个,发出来跟大伙儿分享一下,并希望能得到高手的指点,如何有高手改进的话,在下不胜感激
    2012-12-12
  • jQuery轮播图效果精简版完整示例

    jQuery轮播图效果精简版完整示例

    这篇文章主要介绍了jQuery轮播图效果精简版,结合完整实例形式分析了jQuery响应鼠标事件及针对页面元素的遍历操作相关技巧,需要的朋友可以参考下
    2016-09-09
  • jQuery对象与DOM对象之间的转换方法

    jQuery对象与DOM对象之间的转换方法

    刚开始学习jQuery,可能一时会分不清楚哪些是jQuery对象,哪些是DOM对象。至于DOM对象不多解释,我们接触的太多了,下面重点介绍一下jQuery,以及两者相互间的转换。
    2010-04-04
  • Jquery插件 easyUI属性汇总

    Jquery插件 easyUI属性汇总

    找了个时间看了下EasyUI插件,对它的插件感觉是很舒服,特地把Easy UI的大部分功能属性做了一下汇总。使用easyUI的朋友可以收藏下。
    2011-01-01
  • jquery 输入框数字限制插件

    jquery 输入框数字限制插件

    jquery 输入框数字限制插件,需要的朋友可以参考下。
    2009-11-11
  • jQuery通过控制节点实现仅在前台通过get方法完成参数传递

    jQuery通过控制节点实现仅在前台通过get方法完成参数传递

    这篇文章主要介绍了jQuery通过控制节点实现仅在前台通过get方法完成参数传递的功能,实例分析了jQuery操作节点的技巧与控制前台get方法传递参数的用法,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • 基于jquery实现的鼠标拖拽元素复制并写入效果

    基于jquery实现的鼠标拖拽元素复制并写入效果

    基于jquery实现的鼠标拖拽元素复制并写入效果的实现代码,需要的朋友可以参考下。
    2011-08-08
  • jQuery检测滚动条是否到达底部

    jQuery检测滚动条是否到达底部

    这篇文章主要介绍了jQuery检测滚动条是否到达底部的实现方法,文中介绍了两种检测滚动条到达底部的状况,感兴趣的小伙伴们可以参考一下
    2015-12-12

最新评论