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>