欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-03-12 09:34:56
代码如下: /* *长度跟踪器 *v2.1.0 *bind2id:用于显示长度变化的元素的id *max:最大长度 *msgwrap:提示信息(必须要有一个"-"占位符) *eg...

代码如下:

/*
*长度跟踪器
*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'。

上一篇： Apache Kylin 在甜橙金融的大数据应用

下一篇： k8s的yaml文件配置详解（三）

推荐阅读