一个基于jquery的文本框记数器
2012-09-19 00:00
579 查看
/* *长度跟踪器 *v2.1.0 *bind2Id:用于显示长度变化的元素的id *max:最大长度 *msgWrap:提示信息(必须要有一个"-"占位符) *eg:$('#input').lenTracer({bind2Id:'myTracer',max:150,msgWrap:'您还可以输入-个字符'}); *author:liujg1015@gmail.com */ (function ($) { var zw_validate = function (el, option) { this.el = $(el); this.bindEl = false; this.setting = { bind2Id: false, max: 100, msgWrap: '您还可以输入-个字符' }; if (option) { $.extend(this.setting, option); this.init(); } }; zw_validate.prototype = { init: function () { var _this = this; this.bindEl = $('#' + this.setting.bind2Id); this.el.focus(function () { _this.start(); }).blur(function () { _this.dispose(); }); this.el.css({ paddingBottom: 20 }); this.initMsg(); }, initMsg: function () { var wrap = this.setting.msgWrap.split('-'); this.bindEl.text(this.setting.max - this.count().total).before(wrap[0]).after(wrap[1]); }, count: function () { var _val = this.el.val(); var _len = _val.length; var _rowCount = 0; var _enterLen = 0; var _partten = /\n+/g; if (_len > 0 && _partten.test(_val)) { _enterLen += 3; while ((result = _partten.exec(_val)) != null) { if ((result.index + 1 + _enterLen) > this.setting.max) { break; } _enterLen += 3; } _rowCount = _val.match(_partten).length; } return { total: (_len + _rowCount * 3), enterLen: _enterLen }; }, start: function () { var _this = this; _this.timer = setInterval(function () { var _val = _this.el.val(); var _rlt = _this.count(); if (_rlt.total > _this.setting.max) { if (_rlt.enterLen > 0) { _this.el.val(_val.substr(0, _this.setting.max - _rlt.enterLen)); } else { _this.el.val(_val.substr(0, _this.setting.max)); } _this.bindEl.text(_this.setting.max - _this.count().total); return; } _this.bindEl.text(_this.setting.max - _rlt.total); }, 300); }, dispose: function () { clearInterval(this.timer); }, restore: function () { this.bindEl.text(this.setting.max - this.el.val().length); } }; $.fn.extend({ lenTracer: function (option) { return new zw_validate(this, option); } }); })(jQuery);
一、上面是计数器的脚本,可将脚本贴到js文件中,然后在html里面添加引用。
<html> <head> <title>demo</title> </head> <body> <table> <tr> <td> 标题 </td> <td> <input type="text" id="title" /> <span id="titlelen"></span> </td> </tr> <tr> <td> 评论 </td> <td> <textarea cols="5" rows="5" id="comment"></textarea> <span id="commentlen"></span> </td> </tr> </table> <script src="../scripts/jquery.js" type="text/javascript"></script> <script src="../scripts/lentracer.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $('#title).lenTracer({ bind2Id: titlelen, max: 50}); $('#comment).lenTracer({ bind2Id: commentlen, max: 200, msgWrap: '剩余-字' }); }); </script> </body> </html>
二、上面的代码是展示如何使用。
这个计数器是自己用jQuery写的,因此要依赖于jQuery库函数。能计算回车符,因为在textarea里面的回车符提交到后台后是'\r\n'。欢迎批评、指正。
相关文章推荐
- 使用jQuery开发一个基于HTML5的漂亮图片拖拽上传web应用
- 基于jquery创建的一个图片、视频缓冲的效果样式插件
- 基于jQuery的一个简单聊天室
- 基于jquery的类似于京东商场左菜单的一个例子
- 一个基于JQuery的日历时间控件
- 基于jquery的一个简单的脚本验证插件
- TimergliderJS 一个基于jQuery的时间轴插件
- 分享一个超棒的基于jQuery的所见即所得(WYSIWYG)编辑器 - Redactor
- 基于jQuery的一个简单的图片查看器实现
- 一个基于jquery的页面预载入效果(loading)
- 一个基于jQuery写的弹窗效果(附源码)
- 分享一个基于jQuery,backbone.js和underscore.js的消息提示框架 - Backbone.Notifier
- 基于jquery封装的一个js分页
- 分享一个基于jQuery的锁定表格行列的js脚本。
- 基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
- 一个基于jquery的页面预载入效果(loading)
- 一个基于jQuery的简单树形菜单