jquery artTxtCount 文本框输入字数提示

js>

<script type="text/javascript">

/* 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('<span class="' + countClass + '">/u8FD8/u80FD/u8F93/u5165 <strong>' + (maxNumber - val) + '</strong> /u4E2A/u5B57</span>');

}else{

disabled.off();

tipWrap.html('<span class="' + countClass + ' ' + fullClass + '">/u5DF2/u7ECF/u8D85/u51FA <strong>' + (val - maxNumber) + '</strong> /u4E2A/u5B57</span>');

};

};

$(this).bind('keyup change', count);

return this;

};

})(jQuery);

</script>

 

css>

<style>

/* demo */

body { font-size:75%; font-family:'微软雅黑'; }

#demo { width:500px; }

#demo .help, #demo .help a { color:#999; }

#demo form { margin:20px 0; padding:8px; background:#F4F4F4; border:1px solid #EDEDED; }

#demo .tips { color:#999; padding:0 5px; }

#demo .tips strong { color:#1E9300; }

#demo .tips .js_txtFull strong { color:#F00; }

#demo textarea.text { width:474px; }

</style>

 

JSP

//这里还使用了mark it up插件

<s:form id="bookContentForm" action="saveBookContent" method="post" validate="false">

    <s:hidden key="bookContent.id"/>

    <s:hidden key="bookContent.version"/>

    <s:hidden key="chapterId"/>

   <div>章节编辑</div>

   <div align="center">

         <s:textarea name="bookContent.content" id="content" required="false" cssClass="text" theme="simple"/>

   </div>

 <div>

<span id="content_tips" class="tips"></span><br />

            <input type="button" name="return" class="button"  value="返回" οnclick="backUrl();"/>

          <s:submit cssClass="button" method="save" key="button.save" theme="simple"/>

</div>

</s:form>

<script type="text/javascript">

jQuery(function(){

// // 批量

// $('.autoTxtCount').each(function(){

// $(this).find('.text').artTxtCount($(this).find('.tips'), 140);

// });

// 单个

$('#content').artTxtCount($('#content_tips'), 5000);

});

</script>