一个基于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 相关文章推荐
一些经常会用到的Javascript检测函数
May 31 Javascript
jQuery查询数据返回object和字符串影响原因是什么
Aug 09 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
May 23 Javascript
js实现每日自动换一张图片的方法
May 04 Javascript
使用jspdf生成pdf报表
Jul 03 Javascript
CSS中position属性之fixed实现div居中
Dec 14 Javascript
20分钟打造属于你的Bootstrap站点
Jul 27 Javascript
vue监听键盘事件的快捷方法【推荐】
Jul 11 Javascript
vue组件从开发到发布的实现步骤
Nov 11 Javascript
微信小程序使用wxParse解析html的方法示例
Jan 17 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
Jan 30 Javascript
JavaScript实现打砖块游戏
Feb 25 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
ThinkPHP控制器间实现相互调用的方法
2014/10/31 PHP
jQuery+PHP实现的掷色子抽奖游戏实例
2015/01/04 PHP
php+Mysqli利用事务处理转账问题实例
2015/02/11 PHP
php实现的网络相册图片防盗链完美破解方法
2015/07/01 PHP
PHP+MySQL实现的简单投票系统实例
2016/02/24 PHP
PHP简单实现生成txt文件到指定目录的方法
2016/04/25 PHP
[原创]php简单防盗链验证实现方法
2016/07/09 PHP
php使用高斯算法实现图片的模糊处理功能示例
2016/11/11 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
css图片自适应大小
2007/11/28 Javascript
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
jQuery事件 delegate()使用方法介绍
2012/10/30 Javascript
jQuery实现3D文字特效的方法
2015/03/10 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
2016/12/09 Javascript
javascript 正则表达式分组、断言详解
2017/04/20 Javascript
angular4中关于表单的校验示例
2017/10/16 Javascript
ES6中Class类的静态方法实例小结
2017/10/28 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
2017/11/20 Javascript
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
优化Vue项目编译文件大小的方法步骤
2019/05/27 Javascript
Python中的二叉树查找算法模块使用指南
2014/07/04 Python
python带参数打包exe及调用方式
2019/12/21 Python
Python 爬取必应壁纸的实例讲解
2020/02/24 Python
python中rc1什么意思
2020/06/19 Python
python定时截屏实现
2020/11/02 Python
JD Sports比利时官网:英国领先的运动鞋和运动服饰零售商
2018/10/10 全球购物
计算机专业个人求职信范例
2013/09/23 职场文书
董事长助理工作职责范本
2014/07/01 职场文书
2014派出所所长群众路线对照检查材料思想汇报
2014/09/18 职场文书
小学六一儿童节活动总结
2015/05/05 职场文书
食品安全主题班会
2015/08/13 职场文书
初中生物教学随笔
2015/08/15 职场文书
办公室主任岗位竞聘书
2015/09/15 职场文书
八年级历史教学反思
2016/02/19 职场文书
redis连接被拒绝的解决方案
2021/04/12 Redis
clear 万能清除浮动(clearfix:after)
2023/05/21 HTML / CSS