文本框文本输入数量倒计效果
文本框文本输入数量倒计效果属于前端实例代码，有关更多实例代码大家可以查看。
很多比较人性化的文本框都有这样的效果，那就是文本框对输入的文本具有数量显示，并且当在输入的时候能够显示还有多少剩余字符可以输入，如果超出长度，那么就会自动删除超出的，下面就通过一个实例简单介绍一下如何实现此效果。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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;
}
#softwhy a {
text-decoration: underline;
color: red;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript" src="mytest/jQuery/manhuaInputLetter.1.0.js"></script>
<script type="text/javascript">
$(function () {
$("#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))截取指定长度的字符串。
二.相关阅读：
（1）.$.fn参阅$.fn作用简单介绍一章节。
（2）.$.extend参阅$.extend()和$.fn.extend()用法一章节。
（3）.html()参阅jQuery html()一章节。
（4）.val()参阅jQuery val()一章节。
文本框文本输入数量倒计效果，这样的场景在实际项目中还是用的比较多的，关于文本框文本输入数量倒计效果就介绍到这了。