一个基于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 相关文章推荐
jquery实现的超出屏幕时把固定层变为定位层的代码
Feb 23 Javascript
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
Apr 07 Javascript
JS常见问题整理(持续更新)
Aug 06 Javascript
javascript 3d 逐侦产品展示(核心精简)
Mar 26 Javascript
七个很有意思的PHP函数
May 12 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
Jun 10 Javascript
JavaScript重载函数实例剖析
May 13 Javascript
浅谈JavaScript的push(),pop(),concat()方法
Jun 03 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
Jan 20 Javascript
Vue2.x中的Render函数详解
May 30 Javascript
深入浅析ES6 Class 中的 super 关键字
Oct 20 Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
Jul 19 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
windows下PHP APACHE MYSQ完整配置
2007/01/02 PHP
PHP在字符串中查找指定字符串并删除的代码
2008/10/02 PHP
php启动时候提示PHP startup的解决方法
2013/05/07 PHP
PHP用户注册邮件激活账户的实现代码
2017/05/31 PHP
ThinkPHP5框架缓存查询操作分析
2018/05/30 PHP
PHP使用phpunit进行单元测试示例
2019/09/23 PHP
javascript 动态数据下的锚点错位问题解决方法
2008/12/24 Javascript
jquery限制输入字数,并提示剩余字数实现代码
2012/12/24 Javascript
遍历DOM对象内的元素属性示例代码
2014/02/08 Javascript
再谈Jquery Ajax方法传递到action(补充)
2014/05/12 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
2015/05/06 Javascript
JS实现生成会变大变小的圆环实例
2015/08/05 Javascript
requireJS使用指南
2016/04/27 Javascript
Bootstrap中的Panel和Table全面解析
2016/06/13 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
2017/01/13 Javascript
NodeJS仿WebApi路由示例
2017/02/28 NodeJs
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
Vue实现星级评价效果实例详解
2019/12/30 Javascript
js的Object.assign用法示例分析
2020/03/05 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
2020/07/27 Javascript
详解Python中内置的NotImplemented类型的用法
2015/03/31 Python
使用Python求解最大公约数的实现方法
2015/08/20 Python
Python实现采用进度条实时显示处理进度的方法
2017/12/19 Python
python3的print()函数的用法图文讲解
2019/07/16 Python
深入了解NumPy 高级索引
2020/07/24 Python
Django url 路由匹配过程详解
2021/01/22 Python
科颜氏英国官网:Kiehl’s英国
2019/11/20 全球购物
Columbia Sportswear法国官网:全球户外品牌
2020/09/25 全球购物
什么是smarty? Smarty的优点是什么?
2013/08/11 面试题
工程部经理岗位职责
2013/12/08 职场文书
入学申请自荐信范文
2014/02/26 职场文书
城管综合整治方案
2014/05/01 职场文书
关于环保的建议书
2014/05/12 职场文书
教师个人师德总结
2015/02/06 职场文书
2016年过年放假安排通知
2015/08/18 职场文书
如何理解及使用Python闭包
2021/06/01 Python