jquery插件:文本输入字符数量限制器(jquery.wordlimitor-1.0.1.js)

项目需要完成的文本输入框字符数量限制器,自己使用感觉还不错,特推荐给大家。

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:[email protected]">提建议</a>
</body>
</html>

  

3.下载

 猛点击下载

你可能感兴趣的:(jquery插件)