一个基于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 相关文章推荐
firefox中JS读取XML文件
Dec 21 Javascript
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
Nov 06 Javascript
Javascript异步编程模型Promise模式详细介绍
May 08 Javascript
理解javascript定时器中的单线程
Feb 23 Javascript
javascript中arguments,callee,caller详解
Mar 16 Javascript
node.js使用cluster实现多进程
Mar 17 Javascript
js 将图片连接转换成base64格式的简单实例
Aug 10 Javascript
js 弹出虚拟键盘修改密码的简单实例
Oct 10 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
Jul 03 Javascript
jQuery中DOM常见操作实例小结
Aug 01 jQuery
vue使用openlayers实现移动点动画
Sep 24 Javascript
JS数组索引检测中的数据类型问题详解
Jan 11 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
php session_start()出错原因分析及解决方法
2013/10/28 PHP
PHP Static延迟静态绑定用法分析
2016/03/16 PHP
Yii2中使用asset压缩js,css文件的方法
2016/11/24 PHP
PHP函数按引用传递参数及函数可选参数用法示例
2018/06/04 PHP
php实现算术验证码功能
2018/12/05 PHP
newxtree.js代码
2007/03/13 Javascript
jquery触发a标签跳转事件示例代码
2013/07/21 Javascript
javascript内置对象arguments详解
2014/03/16 Javascript
Javascript中的几种URL编码方法比较
2015/01/23 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
2015/03/05 Javascript
js过滤HTML标签完整实例
2015/11/26 Javascript
Vue 仿百度搜索功能实现代码
2017/02/16 Javascript
Vue2.0如何发布项目实战
2017/07/27 Javascript
Angular实现双向折叠列表组件的示例代码
2017/11/21 Javascript
Vue实现点击显示不同图片的效果
2019/08/10 Javascript
使用webpack将ES6转化ES5的实现方法
2019/10/13 Javascript
[03:09]DOTA2亚洲邀请赛 LGD战队出场宣传片
2015/02/07 DOTA
python实现socket客户端和服务端简单示例
2014/02/24 Python
利用Python学习RabbitMQ消息队列
2015/11/30 Python
Python向Excel中插入图片的简单实现方法
2018/04/24 Python
python爬取微信公众号文章
2018/08/31 Python
python使用zip将list转为json的方法
2018/12/31 Python
pandas-resample按时间聚合实例
2019/12/27 Python
python 偷懒技巧——使用 keyboard 录制键盘事件
2020/09/21 Python
ONLY瑞典官网:世界知名服装品牌
2018/06/19 全球购物
英国在线潜水商店:Simply Scuba
2019/03/25 全球购物
女儿十岁生日答谢词
2014/01/27 职场文书
后备干部考察材料
2014/02/12 职场文书
道路交通事故人身损害赔偿协议书
2014/11/19 职场文书
2014年档案管理员工作总结
2014/12/01 职场文书
前台接待岗位职责
2015/02/03 职场文书
杭州黄龙洞导游词
2015/02/10 职场文书
党员身份证明材料
2015/06/19 职场文书
企业管理制度设计时要注意的几种“常见病”!
2019/04/19 职场文书
SQL实现LeetCode(176.第二高薪水)
2021/08/04 MySQL
海贼王十大逆天果实 魂魂果实上榜,岩浆果实攻击力最强
2022/03/18 日漫