半夜睡醒了，起来看会书，今天做项目的时候，顺便看了一下网站限制输入长度的实现方案，感觉看了不记下来就没有用，于是趁现在精神（神经）起床写下来。
插件的官方地址http://remysharp.com/2008/06/30/maxlength-plugin/
调用很简单：
<input type="text" name="" value="" id="j-text" maxlength="100"/><span>剩余字数：<em id="j-tip-text"></em></span> <script src="jquery1.4.4.js" type="text/javascript" charset="utf-8"></script> <script src="maxlength.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> $('#j-text').maxlength('#j-tip-text'); </script> </body> </html> 但是感觉这样写起来很麻烦，而且最蛋疼的是验证输入域的外围必须要有一个form标签。于是就想着改造一下，最好是直接在input里面写maxlength属性，不用去页面调用最好。
于是就插入了这么一段：
var $tip = $('<span>剩余字数：<em></em></span>'); var $charsLeft = $tip.find('em'); $tip.insertAfter($field); 这样禁用JS的情况下就不会出现没有用的提示了，不够感觉更好的应该是把固定的长度说明提示写在后面，然后再用JS移除掉，换上动态的提示。
一个实例：
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> form{ border-top: 1px solid #e4e4e4;} label{display: block;} form span{ display: block;} </style> </head> <body> <form action="#" method="get" accept-charset="utf-8"> <p><label for="">input：</label> <input type="text" name="" value="" id="j-text" maxlength="100"/> <span>剩余字数：<em id="j-tip-text"></em></span></p> <p><label for="">textarea：</label> <textarea name="Name" rows="3" cols="40" id="j-area" maxlength="100"></textarea> <span>剩余字数：<em id="j-tip-area"></em></span> <input type="hidden" name="maxlength" value="100" id="j-area-hide"/></p> <p><label for="">by word：</label> <input type="text" name="" value="" id="j-word" maxlength="100"/> <span>剩余字数：<em id="j-tip-word"></em></span></p> </form> <form action="#" method="get" accept-charset="utf-8"> <p><label for="">input：</label> <input class="maxlength" type="text" name="" value="" id="j-text-1" maxlength="100"/></p> <p><label for="">textarea：</label> <textarea class="maxlength" name="Name" rows="3" cols="30" id="j-area-1" maxlength="100"></textarea> <input type="hidden" name="maxlength" value="100" id="j-area-hide"/></p> </form> <script src="jquery1.4.4.js" type="text/javascript" charset="utf-8"></script> <script src="maxlength.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> $('#j-text').maxlength('#j-tip-text'); $('#j-area').maxlength('#j-tip-area'); $('#j-word').maxlength({ 'feedback':'#j-tip-word', 'words':true }); $('.maxlength').maxlength(); </script> </body> </html> 
maxlength插件说明，只是标识一下改动的地方而已，改天再好好改改：
(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标签 $form = $(field.form), limit = settings.useInput ? $form.find('input[name=maxlength]').val() : $field.attr('maxlength'), $charsLeft = $form.find(settings.feedback); //添加的 var $tip = $('<span>剩余字数：<em></em></span>'); var $charsLeft = $tip.find('em'); $tip.insertAfter($field); 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 =
