文本框文本输入数量倒计效果

快乐打工仔 分类:实例代码

文本框文本输入数量倒计效果属于前端实例代码,有关更多实例代码大家可以查看

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

代码实例如下:

<!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()一章节。

文本框文本输入数量倒计效果,这样的场景在实际项目中还是用的比较多的,关于文本框文本输入数量倒计效果就介绍到这了。

回复

我来回复
  • 暂无回复内容