一个基于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 图片Silhouette Fadeins渐显效果
Feb 07 Javascript
基于jquery可配置循环左右滚动例子
Sep 09 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
Dec 03 Javascript
javascript实现yield的方法
Nov 06 Javascript
利用jquery写的左右轮播图特效
Feb 12 Javascript
javascript获取元素离文档各边距离的方法
Feb 13 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
Mar 25 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
Nov 17 Javascript
详解AngularJS如何实现跨域请求
Aug 22 Javascript
vue获取DOM元素并设置属性的两种实现方法
Sep 30 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
Dec 02 Javascript
javascript 代码是如何被压缩的示例代码
May 06 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学习之 循环结构实现代码
2011/06/09 PHP
PHP 类相关函数的使用详解
2013/05/10 PHP
PHP获取中英混合字符串长度的方法
2014/06/07 PHP
smarty中英文多编码字符截取乱码问题解决方法
2014/10/28 PHP
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
PHP实现将上传图片自动缩放到指定分辨率,并保持清晰度封装类示例
2019/06/17 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
JavaScript实现动态增加文件域表单
2009/02/12 Javascript
TextArea 控件的最大长度问题(js json)
2009/12/16 Javascript
javascript跨域刷新实现代码
2011/01/01 Javascript
JavaScript调用客户端Java程序的方法
2015/07/27 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
2016/03/17 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
2016/08/19 Javascript
浅谈js内置对象Math的属性和方法(推荐)
2016/09/19 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
微信小程序 底部导航栏目开发资料
2016/12/05 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
2017/03/23 Javascript
vue.js简单配置axios的方法详解
2017/12/13 Javascript
微信小程序模版渲染详解
2018/01/26 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
2018/02/05 Javascript
了解javascript中变量及函数的提升
2019/05/27 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
2019/07/04 Javascript
javascript canvas时钟模拟器
2020/07/13 Javascript
[53:15]Mineski vs iG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
浅谈Python协程
2020/06/17 Python
澳大利亚潮流尖端的快时尚品牌:Cotton On
2016/09/26 全球购物
FORZIERI澳大利亚站:全球顶级奢华配饰精品店
2016/12/31 全球购物
eDreams意大利:南欧领先的在线旅行社
2018/11/23 全球购物
Kathmandu美国网站:新西兰户外运动品牌
2019/03/23 全球购物
如何开发安全的AJAX应用
2014/03/26 面试题
给老婆的道歉信
2015/01/20 职场文书
多属性、多分类MySQL模式设计
2021/04/05 MySQL
JavaScript嵌入百度地图API的最详细方法
2021/04/16 Javascript
FP-growth算法发现频繁项集——构建FP树
2021/06/24 Python
Java9新特性之Module模块化编程示例演绎
2022/03/16 Java/Android