项目需要完成的文本输入框字符数量限制器,自己使用感觉还不错,特推荐给大家。
1.源码
/*
* wordlimitor 1.0.1
* Date: 2011-08-01
* (c) 20011 gudufy,http://gudufy.cnblogs.com/
*
* This is licensed under the GNU LGPL, version 2.1 or later.
* For details, see: http://creativecommons.org/licenses/LGPL/2.1/
*/
$(function () {
$.fn.wordlimitor = function () {
$(this).each(function (i) {
if ($(this).nextAll('div.textlimit').size() == 0) {
$(this).after('<div class="textlimit">0</div>');
}
$(this).bind('propertychange focus keyup input paste', function () {
var _max = $(this).attr('max');
var _length = $(this).val().length;
if (_length > _max) {
$(this).val($(this).val().substring(0, _max));
}
_left = $(this).offset().left;
_top = $(this).offset().top;
_width = $(this).width();
_height = $(this).height();
$(this).nextAll('div.textlimit').html(_length + '/' + _max);
$(this).nextAll('div.textlimit').css({
'left': _left + _width + 15,
'top': _top + _height - 12
});
});
$(this).focus(function () {
$(this).nextAll('div.textlimit').fadeIn('slow');
});
$(this).blur(function () {
$(this).nextAll('div.textlimit').fadeOut('slow');
});
});
};
$('textarea[max],input[max]').wordlimitor();
});
2.使用(引入wordlimitor文件,直接在要限制的input控件上填写max=“要限制的字符数”即可)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>字符限制器</title>
<style type="text/css">
.textlimit {
position:absolute;
font-size:9pt;
color:#4586b5;
font-size:16px;
font-weight:bold;
font-family:Arial;
display:none;
}
</style>
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="jquery.wordlimitor-1.0.1.js" type="text/javascript"></script>
</head>
<body>
<p>单行限制:<input type="text" size="40" max="50" /></p>
<p>多行限制:<textarea rows="4" cols="40" max="200"></textarea></p>
<br />
<a href="mailto:gudufy@163.com">提建议</a>
</body>
</html>
3.下载
猛点击下载