编辑器加载中..
前台代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jTextCount -- jquery 插件，统计文本框字符串长度</title>
<script src="/Js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/jTextCount.js"></script>
<link rel="stylesheet" type="text/css" href="/css/jTextCount.css" />
<style type="text/css">
body
{
font-size: 12px;
color: #666;
}
body, div, span
{
margin: 0px;
padding: 0px;
}
h1
{
font-size: 24px;
font-weight: bold;
padding: 10px 4px;
margin: 10px 0;
}
#main
{
width: 500px;
margin: 0 auto;
}
.about
{
margin-top: 30px;
line-height: 2em;
}
.author
{
margin-top: 30px;
}
</style>
</head>
<body>
<div id="main">
<select id="xxoo">
<option value="0">0</option>
<option value="1">1</option>
</select>
<h1>
jTextCount字符统计</h1>
<div>
<textarea id="txa" class="jTextCount-text" name="txa" cols="80" rows="5"></textarea></div>
<div class="jTextCount-info">
<input type="button" name="smt" id="smt" value="提交" />
<div class="jTextCount-bar-wrap">
<div id="jcount-bar" class="jTextCount-bar">
</div>
</div>
<div class="jTextCount-counter-wrap">
剩余字数 <span id="jcounter" class="jTextCount-counter"></span>
</div>
</div>
</div>
<script type="text/javascript">
$('#txa').jTextCount('#jcounter', { max: 140, jCountBarId: '#jcount-bar', callback: function(s) { $('#smt').attr('disabled', !s); } });
</script>
</body>
</html>
Javascription:
/**
* 鉴于没有好的textarea文本框字数统计工具，尤其是不支持中文输入，以及复制粘贴，
* 特开发一个，很简单，相信不用加注释了！无视keyup/keypress/change...等事件...(因为不支持中文)
* Debian下开发，windows用户请用比较高级的编辑器(editplus/notepad++/vim...)打开，以防乱码
* max参数作为限定用，如果只想显示长度，可不用加此参数，如果想像twitter (
* 国内微博实现的字数显示技术没有twitter牛，总是反应慢一拍 ) 等那样，显示剩余字数，请加参数
* callback函数在文本框内的字符数发生改变时调用，可以用来决定button按钮是否可用等
*
* Licensed under The MIT License
*
* @version 1.0
* @since 2010-11-20 15:47
* @author Jesse <microji@126.com>
*/
/**
* Usage: $('#txa').jTextCount('#jcounter', {max:140, jCountBarId : '#jcount-bar', callback:function(s){
* $('#submitId').attr('disabled', !s) ;
* }});
*
* @param jCountId 你想动态显示字符数或剩余字符数的标签ID，注意要家#号，如：'#counter'
* @param options 一些附加参数
*
* Valid options:
* ---------------------------------------
* max: 大于0的数值
* jCountBarId : 显示一个进度条的id！，注意要加#号，如：'#count-bar'
* callback: 回调函数，在文本框内字符长度发生改变时，调用，并传递是否超过max的限定的bool参数！
*/
$.fn.jTextCount = function(jCountId, options) {
var defaults = {
max: 0, // define max length for the texarea
jCountBarId: '', // use jquery id type ! like '#count-bar'
callback: function() { } // callback function ,when length changed
};
if (options) {
$.extend(defaults, options);
};
var editor = this;
var counter = $(jCountId);
var countBar = defaults.jCountBarId != '' && $(defaults.jCountBarId).length > 0 ? $(defaults.jCountBarId) : null;
var timer = null;
editor.defaultLength = editor.val().length; // get original length
var processChange = function() {
var newLength = editor.val().length;
if (defaults.max > 0) {
var num = defaults.max - newLength;
counter.text(num);
if (countBar) {
var percent = Math.min((100 * newLength / defaults.max).toFixed(1), 100);
countBar.width(percent + '%');
}
//剩余
if (num >= 0 && num <= 10) {
defaults.callback(true);
counter.removeClass('jTextCount-error').addClass('jTextCount-warn');
if (countBar) {
countBar.removeClass('jTextCount-bar-error').addClass('jTextCount-bar-warn');
}
}
//超出
else if (num < 0) {
counter.removeClass('jTextCount-warn').addClass('jTextCount-error');
if (countBar) {
countBar.removeClass('jTextCount-bar-warn').addClass('jTextCount-bar-error');
}
defaults.callback(false);
}
//正常
else {
defaults.callback(true);
counter.removeClass('jTextCount-warn').removeClass('jTextCount-error');
if (countBar) {
countBar.removeClass('jTextCount-bar-warn').removeClass('jTextCount-bar-error');
}
}
} else {
counter.text(newLength);
}
editor.defaultLength = newLength;
};
processChange();
/*
editor.bind('input',function(){
var newLength = editor.val().length ;
if( newLength != editor.defaultLength ){
processChange();
}
}); */
editor.bind('focus', function() {
if (!timer) {
timer = window.setInterval(function() {
var newLength = editor.val().length;
if (newLength != editor.defaultLength) {
processChange();
}
}, 10);
}
});
editor.bind('blur', function() {
window.clearInterval(timer);
timer = null;
});
};
CSS:
.jTextCount-text{
width:482px; height: 60px; padding: 8px; font-size: 12px; line-height: 20px; border:1px solid #CCC;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
}
.jTextCount-text:focus{
border-color:rgba(82, 168, 236, 0.75);
-moz-box-shadow:0 0 8px rgba(82, 168, 236, 0.5);
-webkit-box-shadow:0 0 8px rgba(82, 168, 236, 0.5);
box-shadow:0 0 8px rgba(82, 168, 236, 0.5);
}
.jTextCount-info{height: 24px; margin-top: 6px;}
.jTextCount-counter-wrap{float:right; margin-right: 12px;}
.jTextCount-counter{font-weight: bold;}
.jTextCount-bar-wrap{border:1px solid #CCC; height: 16px; width:100px; float: right;}
.jTextCount-bar{display: block; height: 16px; background: #4E7826;}/*default color*/
.jTextCount-warn{color:#E38F00;}
.jTextCount-error{color:#DA0B0B;}
.jTextCount-bar-warn{background-color: #FFFE00;}
.jTextCount-bar-error{background-color: #FF2911;}
效果图：
