很多比较人性化的文本框都有这样的效果，那就是文本框对输入的文本具有数量显示，并且当在输入的时候能够显示还有多少剩余字符可以输入，如果超出长度，那么就会自动删除超出的，下面就通过一个实例简单介绍一下如何实现此效果。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.gaodaima.com/" />
<title>搞代码</title>
<style type="text/css">
#content {
width: 700px;
height: 100px;
border: 1px #CCCCCC dashed;
padding: 10px;
}
#show {
font-size: 14px;
font-weight: bold;
height: 40px;
line-height: 40px;
}
#sid {
font-size: 22px;
font-weight: bold;
color: #009900;
font-style: italic;
}
#description {
margin: 0px auto;
width: 400px;
font-size: 14px;
}
#gaodaima a {
text-decoration: underline;
color: red;
}
</style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">
<script type="text/javascript">
$(function () {
$.fn.manhuaInputLetter = function(options) {
var defaults = {
len : 200,
showId : "show"
};
var options = $.extend(defaults,options);
var $input = $(this);
var $show = $("#"+options.showId);
$show.html(options.len);
$input.live("keydown keyup blur",function(e){
var content =$(this).val();
var length = content.length;
var result = options.len - length;
if (result >= 0){
$show.html(result);
}else{
$(this).val(content.substring(0,options.len))
}
});
}
$("#content").manhuaInputLetter({
len: 50,//限制输入的字符个数
showId: "sid"//显示剩余字符文本标签的ID
});
});
</script>
</head>
<body>
<div style="margin:100px auto; width:800px;">
<textarea id="content"></textarea>
<p id="show">
您还可以输入：
<label id="sid"></label>
</p>
</div>
</body>
</html>
以上代码实现了想要的功能，下面就简单介绍一下如何实现此效果：
一.代码注释：
（1）.$(function (){}，当文档结构完全加载完毕再去执行函数。
（2）.$(“#content”).manhuaInputLetter({}），调用manhuaInputLetter函数，并且传递一个对象直接量作为参数，规定了字数和显示倒计数字元素的id值。
（3）.$.fn.manhuaInputLetter=function(options){}，为jQuery对象添加新的方法。
（4）.var defaults={}，声明一个对象直接量，这里设置了默认的输入字数和显示倒记数字元素的id属性值。
（5）.var options=$.extend(defaults,options)，使用options对象来扩展defaults对象，前者的属性值会被后者的同名属性覆盖。
（6）.var $input=$(this)，获取<textarea>对象。
（7）.var $show=$(“#”+options.showId)，获取显示倒记数字元素对象。
（8）.$show.html(options.len)，输出允许输入的最大字数。
（9）.$input.on(“keydown keyup blur”,function(e){}，为<textarea>对象绑定三个鼠标事件处理函数。
（10）.var content=$(this).val()，获取<textarea>对象的值。
（11）.var length=content.length，获取<textarea>对象值的长度。
（12）.var result=options.len-length，计算出剩余的字数。
（13）.if(result>=0){}判断剩余的字数是否大于零，如果大于零，则在指定元素输出剩余的字数，否则使用$(this).val(content.substring(0,options.len))截取指定长度的字符串。
实现效果：
转载请注明原文链接：jQuery实现文本框文本输入数量倒计效果
