一个基于jquery的文本框记数器


Posted in Javascript onSeptember 19, 2012
/* 
*长度跟踪器 
*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'。欢迎批评、指正。
Javascript 相关文章推荐
JS限制上传图片大小不使用控件在本地实现
Dec 19 Javascript
JavaScript之IE的fireEvent方法详细解析
Nov 20 Javascript
javascript判断office版本示例
Apr 11 Javascript
jQuery.holdReady()使用方法
May 20 Javascript
谷歌地图打不开的解决办法
Aug 07 Javascript
如何在MVC应用程序中使用Jquery
Nov 17 Javascript
node+express+jade制作简单网站指南
Nov 26 Javascript
jQuery Mobile页面返回不需要重新get
Apr 26 Javascript
jQuery向父辈遍历的简单方法
Sep 18 Javascript
Bootstrap轮播图学习使用
Feb 10 Javascript
JavaScript实现256色转灰度图
Feb 22 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
Sep 17 Javascript
html中的input标签的checked属性jquery判断代码
Sep 19 #Javascript
基于jquery打造的百分比动态色彩条插件
Sep 19 #Javascript
jQuery Ajax提交表单查询获得数据实例代码
Sep 19 #Javascript
基于JQuery的多标签实现代码
Sep 19 #Javascript
一样的table?不一样的table(可编辑状态table)
Sep 19 #Javascript
jQuery学习笔记 获取jQuery对象
Sep 19 #Javascript
jQuery学习笔记 更改jQuery对象
Sep 19 #Javascript
You might like
php5.3 不支持 session_register() 此函数已启用的解决方法
2013/11/12 PHP
PHP 5.3和PHP 5.4出现FastCGI Error解决方法
2015/02/12 PHP
php中使用gd库实现下载网页中所有图片
2015/05/12 PHP
ThinkPHP实现递归无级分类――代码少
2015/07/29 PHP
jquery 常用操作整理 基础入门篇
2009/10/14 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
2011/09/13 Javascript
js定时器(执行一次、重复执行)
2014/03/07 Javascript
node.js中的fs.rmdirSync方法使用说明
2014/12/16 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
2015/03/04 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
2015/05/01 Javascript
基于jquery实现动态竖向柱状条特效
2016/02/12 Javascript
JS中使用FormData上传文件、图片的方法
2016/08/07 Javascript
微信小程序  wx.request合法域名配置详解
2016/11/23 Javascript
js学习总结_选项卡封装(实例讲解)
2017/07/13 Javascript
前端主流框架vue学习笔记第一篇
2017/07/26 Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
2017/08/16 Javascript
AngularJS中controller控制器继承的使用方法
2017/11/03 Javascript
vue和webpack项目构建过程常用的npm命令详解
2018/06/15 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
2019/01/19 Javascript
Javascript ParentNode和ChildNode接口原理解析
2020/03/16 Javascript
vue基于Echarts的拖拽数据可视化功能实现
2020/12/04 Vue.js
[26:52]LGD vs EG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[57:59]EG vs Secret 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
python解析xml模块封装代码
2014/02/07 Python
python实现上传样本到virustotal并查询扫描信息的方法
2014/10/05 Python
数据挖掘之Apriori算法详解和Python实现代码分享
2014/11/07 Python
Python的time模块中的常用方法整理
2015/06/18 Python
Python脚本实现虾米网签到功能
2016/04/12 Python
python实现图片处理和特征提取详解
2017/11/13 Python
django filter过滤器实现显示某个类型指定字段不同值方式
2020/07/16 Python
自荐信范文
2013/12/10 职场文书
2014年社区庆元旦活动方案
2014/03/08 职场文书
保密工作责任书
2014/04/16 职场文书
合作协议书模板2014
2014/09/26 职场文书
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL
关于@OnetoMany关系映射的排序问题,使用注解@OrderBy
2021/12/06 Java/Android