轻量级输入字数提示jQuery插件 – artTxtCount

作者: nick 分类: css, jquery, js 发布时间: 2010-06-14 02:32 ė 61条评论

artTxtCount是 一个基于jQuery的简单输入字符统计与限制的插件,可以实现类似twitter、新浪微博、腾讯微博等字符统计的效果。

虽然网上已经有好几个同类型的插件了,但是封装过度,实际应用中总是有那么一丝牵绊,因为它们不能指定提示消息的容器。其实我们只需要一个简单的效 果就可以了:

预览:http://www.planeart.cn/downs/artTxtCount/



/* tangbin - http://www.planeArt.cn - MIT Licensed */
(function($){
  // tipWrap:   提示消息的容器
  // maxNumber:   最大输入字符
  $.fn.artTxtCount = function(tipWrap, maxNumber){
    var countClass = 'js_txtCount',    // 定义内部容器的CSS类名
      fullClass = 'js_txtFull',    // 定义超出字符的CSS类名
      disabledClass = 'disabled';    // 定义不可用提交按钮CSS类名

    // 统计字数
    var count = function(){
      var btn = $(this).closest('form').find(':submit'),
        val = $(this).val().length,

        // 是否禁用提交按钮
        disabled = {
          on: function(){
            btn.removeAttr('disabled').removeClass(disabledClass);
          },
          off: function(){
            btn.attr('disabled', 'disabled').addClass(disabledClass);
          }
        };

      if (val == 0) disabled.off();
      if(val <= maxNumber){
        if (val > 0) disabled.on();
        tipWrap.html('\u8FD8\u80FD\u8F93\u5165 ' + (maxNumber - val) + ' \u4E2A\u5B57');
      }else{
        disabled.off();
        tipWrap.html('\u5DF2\u7ECF\u8D85\u51FA ' + (val - maxNumber) + ' \u4E2A\u5B57');
      };
    };
    $(this).bind('keyup change', count);

    return this;
  };
})(jQuery);

本文出自 传播、沟通、分享,转载时请注明出处及相应链接。

本文永久链接: https://www.nickdd.cn/?p=756

发表评论

您的电子邮箱地址不会被公开。

Ɣ回顶部