插件的官方地址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/网页特效" 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 = 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(); });};//这里可以加一个separation，用来自定义分隔符，比如用“，”什么的分割$.fn.maxlength.defaults = { useInput : false, hardLimit : true, feedback : '.charsLeft', words : false};
})(jQuery);
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索this
jquery 字符串 length、字符串长度length、jquery 字符串长度、jquery获取字符串长度、jquery截取字符串长度，以便于您获取更多的相关知识。
时间： 2024-10-29 01:38:22