jQuery实现文本框文本输入数量倒计效果
很多比较人性化的文本框都有这样的效果,那就是文本框对输入的文本具有数量显示,并且当在输入的时候能够显示还有多少剩余字符可以输入,如果超出长度,那么就会自动删除超出的,下面就通过一个实例简单介绍一下如何实现此效果。
代码实例如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
<!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实现文本框文本输入数量倒计效果

微信 赏一包辣条吧~

支付宝 赏一听可乐吧~
发表评论