jQuery实现文本框文本输入数量倒计效果搞代码

很多比较人性化的文本框都有这样的效果，那就是文本框对输入的文本具有数量显示，并且当在输入的时候能够显示还有多少剩余字符可以输入，如果超出长度，那么就会自动删除超出的，下面就通过一个实例简单介绍一下如何实现此效果。

代码实例如下:

<!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>

<!DOCTYPE html>

<html>

<head>

#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>

$(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>

您还可以输入：

</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))截取指定长度的字符串。

实现效果：

搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：jQuery实现文本框文本输入数量倒计效果

Hi，您需要填写昵称和邮箱！