文本框的字数限制功能jquery插件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了文本框的字数限制功能jquery插件相关的知识，希望对你有一定的参考价值。
参考技术A 后来在网上闲逛的时候突然发现一个比较好的文本框的字数限制的jqueryplugin，简单好用
效果如下图
复制代码
代码如下:
<!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>
<title>关于文本框的字数限制功能</title>
<script
type="text/javascript"
src="jquery-1.2.6.min.js"></script>
<script
type="text/javascript"
src="maxlength.js"></script>
</head>
<body>
<p>Enter
your
hobbies
(<50
characters)</p>
<textarea
style="width:300px;
height:150px"
data-maxsize="50"
data-output="status1"
wrap="virtual"></textarea><br
/>
<div
id="status1"
style="width:300px;font-weight:bold;text-align:right"></div><br
/>
<p>Enter
your
postal
code
(<6
characters)</p>
<input
type="text"
name="T1"
size="15"
data-maxsize="6">
</body>
</html>
属性解释:
data-maxsize:该文本域能够接受的最大字数.(important)
data-output:如果想实时动态显示文本框里的字数，该属性设置显示字数的span或div的id.(字数显示的颜色会随着数量变化)
如果不修改它的源文件的话，加添了js引用后，你只需要给自己的text或者textarea加上data-maxsize属性就可以了。
关于动态设置最大值
使用setformfieldsize方法：
setformfieldsize($field,
maxsize,
outputfieldid)
属性解释:
$field:就是被限制的文本框的JQuery对象(参考Jquery文档).
maxsize:和data-maxsize一样,该文本域能够接受的最大字数.
outputfieldid:和data-output一样.
例子:
复制代码
代码如下:
<script
type="text/javascript">
//jQuery(document).ready(function($)
//fire
on
DOM
ready
setformfieldsize(jQuery('#comment'),
50,
'charsremain')
//);
</script>
在界面加载时执行.
演示代码下载http://xiazai.jb51.net/200911/yuanma/textarea_maxlength.rar
（原创）jquery插件-可选可填控件
;(function ($) {
$.fn.autoFillTextBox = function (options) {
var defaults = {
nShow: 5, //显示条数
nLen:10, //结果显示字数
url: "/handler/DataRequestHandler.ashx", //请求数据的url
inputCss: ‘autofillbox_input‘, //输入框的样式
containerCss:‘autofillbox_container‘, //外层容器的样式
selectCss:‘autofillbox_select‘, //下拉列表的样式
delay:500, //延时查询的间隔
onSelected:function($container){}, //选择后触发的事件，供外部调用
action:‘type‘, //请求的操作关键字
action_name:‘SearchResource‘, //请求的操作
name_field:‘Name‘, //查询的名字（数据库中的名字字段）
py_field:‘pinyin‘, //查询的拼音（数据库中的拼音字段）
other_cond:{}, //其他查询条件
enable_fetch_more:true, //是否启用查找更多
do_fetch_more:function(token){}, //查找更多
container_width:0, //输入框长度
enable_blur:true, //是否允许文本框失去焦点的事件
};
var settings = $.extend(defaults, options);
var token = 0;
var mode = ‘‘;
/*
* 据配置项中的nLen来获取显示结果的缩写
*/
function _getShortName(name){
if (name == null)
return "";
if (name.length>settings.nLen)
return name.substr(0, settings.nLen)+"...";
else
return name;
}
/*
* 显示查询的结果
*/
function _showResult($container, response) {
$container.children(‘ul‘).remove();
if ((response == null || response.length == 0) && !settings.enable_fetch_more)
return;
var $ul = $("<ul></ul>").addClass(settings.selectCss);
$.each(response, function(ii, item) {
$ul.append("<li id=‘"+item.id+"‘ title=‘"+item.name+"‘ data-fullname=‘"+item.name+"‘><a style=‘text-decoration:none‘>" + _getShortName(item.name) + "</a></li>");
})
if (settings.enable_fetch_more){
$ul.append("<a class=‘fetch_more‘ style=‘text-decoration:none;cursor:pointer‘><<<查找更多数据>>></a>")
}
$container.append($ul);
$ul.slideDown(‘slow‘);
$ul.on(‘click‘, ‘li‘, function(){//TODO 此处为啥用delegate没效果
var $container = $(this).parent().parent();
_readMode($(this));
settings.onSelected($container);
});
$ul.on(‘click‘, ‘.fetch_more‘, function(){
settings.do_fetch_more(token);
mode = ‘fetch_more‘;
})
};
/*
* 编辑模式
*/
function _editMode($img){
var $container = $img.parent();
_initInput($container);
}
/*
* 只读模式
*/
function _readMode($li){
var $container = $li.parent().parent();
var val = $li.attr(‘data-fullname‘);
var id = $li.attr(‘id‘);
_initLabel($container, id, val);
}
/*
* 撤销编辑
*/
function _redo($img){
var $container = $img.parent().parent();
_initLabel($container);
}
/*
* 执行查询
*/
function _doSearch() {
var val = $(this).val();
if (val == ‘‘)
return;
var $container = $(this).parent();
var condition = {
nameField:settings[‘name_field‘],
pyField:settings[‘py_field‘],
key:val,
maxItem:settings.nShow
};
condition[settings[‘action‘]] = settings[‘action_name‘];
$.extend(condition, settings.other_cond);
$.getJSON(settings.url, condition)
.done(function (response) {
_showResult($container, _formatResponse(response))
})
.fail(function (response) {
console.log(response);//ToDo 此处应该显示错误信息，并在1s后自动消失
})
};
/*
规范化response，因为有的是返回model数组，有的是返回dataset
*/
var _formatResponse = function(response){
if ($.isArray(response)) {
return response;
}else if (response.hasOwnProperty(‘ds‘)){
return response.ds;
}else{
return [];
}
}
/*
* 延时查询
* 基本思路是，每次用户触发查询时，会重置定时器。若在定时器触发之前用户无再输入，则执行查询
*/
var _delayCall = (function() {
var timer = null;
return function (fn, delay, $input) {
clearTimeout(timer);
timer = setTimeout(function () {
fn.call($input);//使用call可以将input带入给_search函数
}, delay);
};
})();
/*
* 初始化显示结果的标签
*/
function _initLabel($container, id, val){
mode = ‘read‘;
if (id == undefined && val == undefined){
id = $container.attr(‘data-id‘);
val = $container.attr(‘data-val‘);
}else{
$container.attr({‘data-id‘:id, ‘data-val‘:val});
}
$container.children().remove();
$container.append("<span title=‘"+val+"‘ style=‘width:85%‘>"+_getShortName(val)+"</span><img title=‘编辑‘ src=‘/Images/icons/page_white_edit.png‘/>");
$container.undelegate(‘img‘, ‘click‘);
$container.delegate(‘img‘, ‘click‘, function () {
_editMode($(this));
});
}
/*
* 显示撤销按钮
*/
function _showReDo($container){
if ($container.find(‘img‘).length>0)
return;
$container.children(‘input‘).after("<a class=‘autofillbox_button‘><img title=‘撤销‘ src=‘/Images/icons/back.gif‘ /></a>");
$container.undelegate(‘img‘, ‘click‘);
$container.delegate(‘img‘, ‘click‘, function () {
_redo($(this));
});
}
/*
* 初始化输入的文本框
*/
function _initInput($container) {//初始化输入框
mode = ‘write‘;
$container.children().remove();
if ($container.children().length == 0) {
var $input = $(‘<input type="text" class="‘ + settings.inputCss + ‘" id="autofilltextbox_x"/>‘);
var val = $container.attr(‘data-val‘);
$input.val(val);
$container.append($input);
}
$container.undelegate(‘input‘, ‘keyup‘);
$container.delegate(‘input‘, ‘keyup‘, function () {
_delayCall(_doSearch, settings.delay, this);
});
$container.undelegate(‘input‘, ‘click‘);
$container.delegate(‘input‘, ‘click‘, function () {
_doSearch.call(this);
});
if (settings.enable_blur){
$container.undelegate(‘input‘, ‘blur‘);
$container.delegate(‘input‘, ‘blur‘, function () {
var val = $(this).val();
setTimeout(function () {
_setValue($container, ‘‘, val);
}, 250);
});
}
_showReDo($container);
return $container;
}
/*
* 初始化容器
*/
function _initContainer($container) {//初始化外框CSS
// $container.css({‘position‘:‘relative‘}).addClass(settings.containerCss);
$container.addClass(settings.containerCss);
$container.attr({‘data-id‘:‘‘, ‘data-val‘:‘‘});
if (settings.container_width > 0){
$container.width(settings.container_width);
}
var t = new Date();
token = t.getTime();
$container.attr(‘data-token‘, token);//生成控件的唯一标识
return $container;
}
function _setValue($container, id, val){
if (mode != ‘write‘)
return;
$container.attr({‘data-id‘:id, ‘data-val‘:val});
_initLabel($container, id, val);
}
/*
* 初始化控件
*/
this.each(function () {
var _this = $(this);
_this = _initContainer(_this);//初始化外框CSS
_this = _initInput(_this);//初始化输入框
});
//-------------------------------------------公有方法----------------------------------------------------
/*
* 获取控件的token（唯一标识）
*/
this.getToken = function(){
// return $(this).attr(‘data-token‘);
return token;
};
/*
* 设置其他查询条件
*/
this.setOptions =function(options){
$.extend(true, settings, options);//$.extend的第一个参数决定了是否深度拷贝，否则other_cond就会被新的options覆盖
};
/*
* 清理选择结果
*/
this.clear = function(){
var $container = $(this);
$container.attr({‘data-id‘:‘‘, ‘data-val‘:‘‘});
_initInput($container);
};
this.setValue = function(id, val, triggerSelect){
var $container = $(this);
//$container.attr({‘data-id‘:id, ‘data-val‘:val});
//_initLabel($container, id, val);
_setValue($container, id, val);
if (triggerSelect){
settings.onSelected($container);
}
};
this.getSettings = function(){
return settings;
};
return this;
}
})(jQuery);以上是关于文本框的字数限制功能jquery插件的主要内容，如果未能解决你的问题，请参考以下文章