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>
