真正的JQUERY文本框计算输入字数
今天在开发网站交友乐时想对一个textarea进行输入字数的限制，同时可以显示给客户剩余多少字数，就像现在很多的论坛博客。在网上找了一下，看到了一些很好的JQUERY插件，美中不足的是在使用说明上不够详细，转载的文章也都是原文抄袭，真不知道这些兄弟转载了干吗。
比较之后我选择了一个maxlength的JQUERY插件，原文见http://www.iinterest.net/2009/01/31/jquery-plugin-maxlength/ ，感谢原作者。因为此插件限制较多，使用不太方便，所以我做了一些修改。修改点如下：
- 原插件限制了显示剩余字符的控件类型为input，我改为无限制
- 原插件限制了一个form内所有控件只能有相同的字符长度控制，我新增了一个参数maxlength，用于自己指定每个控件的字符长度
- 将原控件根据class名字来查找控件改为根据id来查找
因原文对具体使用说明不多，导致我这样对JQUERY不是特别熟悉的人花了不少时间调试，为了照顾像我一样水平的兄弟，下面给出详细的应用代码。
ASPX文件：
引入JS
<script type="text/javascript" src="../script/maxlength.js"></script>
因为是限制textarea控件，所以必须使用一个hidden input来控制长度，原因是textarea的maxlength属性取值为用户实际输入的字符长度。如果是限制input的输入长度，就不需要了。
<asp:TextBox TextMode="MultiLine" Wrap="true" runat="server" ID="PositionInfo" Rows="20" Width="825px" MaxLength="3000"></asp:TextBox>
<br />最多3000字，还可输入<span id="DescSize">3000</span>字
<input type="hidden" name="maxlength" Value="3000" id="maxlength"/>
JQUERY引用：
<script type="text/javascript">
$(document).ready(function() {
$('#<%=PositionInfo.ClientID%>').bind('propertychange', function() {
$(this).maxlength({
'feedback': 'DescSize','useInput': true
});
});
});
</script>
注意因为引用了aspx的控件，所以这部分script需要放在body中
修改过的js
/*
@author: remy sharp / http://remysharp.com
@params:
feedback - the selector for the element that gives the user feedback. Note that this will be relative to the form the plugin is run against.
hardLimit - whether to stop the user being able to keep adding characters. Defaults to true.
useInput - whether to look for a hidden input named 'maxlength' instead of the maxlength attribute. Defaults to false.
words - limit by characters or words, set this to true to limit by words. Defaults to false.
@license: Creative Commons License - ShareAlike http://creativecommons.org/licenses/by-sa/3.0/
@version: 1.2
@changes: code tidy via Ariel Flesler and fix when pasting over limit and including \t or \n
@changes: add maxlength params - which identify the maxlength of the target control --www.jyoule.com 2011.1.26
*/
(function ($) {
$.fn.maxlength = function (settings) {
if (typeof settings == 'string') {
settings = { feedback : settings };
}
settings = $.extend({}, $.fn.maxlength.defaults, settings);
function length(el) {
var parts = el.value;
if ( settings.words )
parts = el.value.length ? parts.split(/\s+/) : { length : 0 };
return parts.length;
}
return this.each(function () {
var field = this,
$field = $(field),
$form = $(field.form),
limit = settings.useInput ? $form.find('#'+settings.maxlength).val() : $field.attr('maxlength'),
$charsLeft = $form.find('#'+settings.feedback);
function limitCheck(event) {
var len = length(this),
exceeded = len >= limit,
code = event.keyCode;
if ( !exceeded )
return;
switch (code) {
case 8: // allow delete
case 9:
case 17:
case 36: // and cursor keys
case 35:
case 37:
case 38:
case 39:
case 40:
case 46:
case 65:
return;
default:
return settings.words && code != 32 && code != 13 && len == limit;
}
}
var updateCount = function () {
var len = length(field),
diff = limit - len;
$charsLeft.html( diff || "0" );
// truncation code
if (settings.hardLimit && diff < 0) {
field.value = settings.words ?
// split by white space, capturing it in the result, then glue them back
field.value.split(/(\s+)/, (limit*2)-1).join('') :
field.value.substr(0, limit);
updateCount();
}
};
$field.keyup(updateCount).change(updateCount);
if (settings.hardLimit) {
$field.keydown(limitCheck);
}
updateCount();
});
};
$.fn.maxlength.defaults = {
useInput : false,
hardLimit : true,
feedback : 'charsleft',
words : false,
maxlength: 'maxlength'
};
})(jQuery);
