1顶

选择标签至文本域效果,可多选/可过滤重复/可限制个数

稿源：互联网 2022-04-02 21:40:06 点击： 2999 撤稿纠错

禁止修改文本框input中的内容。只能从弹出层中取值。而后不能修改。

以下讨论的是和文本域标签相关的选择标签至文本域效果,可多选/可过滤重复/可限制个数教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<font color=red>
<font color=red>
<!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>选择标签至文本域效果,可多选/可过滤重复/可限制个数@Mr.Think</title> 
<style> 
/*reset css*/ 
body,input{letter-spacing:1px;font:12px/1.5 tahoma,arial,5b8b4f53} 
div,h2,p,input,select{margin:0;padding:0} 
input{vertical-align:middle} 
h1{font-size:1em;font-weight:normal} 
h1 a{background:#047;padding:2px 3px;color:#fff;text-decoration:none} 
h1 a:hover{background:#a40000;color:#fff;text-decoration:underline} 
h3{color:#888;font-weight:bold;font-size:1em;margin:1em auto;position:relative} 
/*demo css*/ 
#demo input{_margin-top:1px;padding-left:5px;border:1px solid #999;width:700px;height:20px;font-size:14px;color:#000} 
#dropbox{display:none;z-index:9999;padding:5px;background:#fff;border:1px solid #999;border-top:0;z-index:999} 
#dropbox a{margin-right:8px;text-decoration:none} 
#dropbox a:hover{text-decoration:underline} 
#dropbox p{line-height:24px} 
#dropbox em.close{float:right;color:#999;font-style:normal;cursor:pointer} 
</style> 
</head> 
<body> 
<div id="demo"> 
<label for="tagsbox"><strong>标签：</strong><input type="text" value="点我" readonly="readonly" class="tagsbox" data-count="10" /></label> 
<div id="dropbox"> 
<em class="close" title="关闭">关闭</em> 
<p><strong>温馨提示：</strong>选择下面的热门标签及使用过的标签,标签将自动排列至表单域。</p> 
<p><strong>热门标签：</strong><a href="javascript:void(0)">时光漫步</a><a href="javascript:void(0)">JavaScript</a><a href="javascript:void(0)">jQuery Plugin</a><a href="javascript:void(0)">那一年</a><a href="javascript:void(0)">jQuery插件</a><a href="javascript:void(0)">简单</a><a href="javascript:void(0)">星空</a><a href="javascript:void(0)">梦田</a><a href="javascript:void(0)">晴朗</a><a href="javascript:void(0)">mrthink.net</a></p> 
<p><strong>您使用过的标签：</strong><a href="javascript:void(0)">许巍</a><a href="javascript:void(0)">Sophie Zelmani</a><a href="javascript:void(0)">王菲</a><a href="javascript:void(0)">小娟&山谷里的居民</a><a href="javascript:void(0)">Ke$Ha</a><a href="javascript:void(0)">Shakira</a><a href="javascript:void(0)">朴树</a><a href="javascript:void(0)">罗大佑</a></p> 
</div> 
<br style="clear:both" /> 
</div> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script> 
/******************************* 
* @author Mr.Think 
*******************************/ 
;(function($){ 
$.fn.bgIframe = $.fn.bgiframe = function(s) { 
// This is only for IE6 
if ( $.browser.msie && /6.0/.test(navigator.userAgent) ) { 
s = $.extend({ 
top : 'auto', // auto == .currentStyle.borderTopWidth 
left : 'auto', // auto == .currentStyle.borderLeftWidth 
width : 'auto', // auto == offsetWidth 
height : 'auto', // auto == offsetHeight 
opacity : true, 
src : 'javascript:false;' 
}, s || {}); 
var prop = function(n){return n&&n.constructor==Number?n+'px':n;}, 
html = '<iframe class="bgiframe"frameborder="0"tabindex="-1"src="'+s.src+'"'+ 
'style="display:block;position:absolute;z-index:-1;'+ 
(s.opacity !== false?'filter:Alpha(Opacity='0');':'')+ 
'top:'+(s.top=='auto'?'expression(((parseInt(this.parentNode.currentStyle.borderTopWidth)||0)*-1)+'px')':prop(s.top))+';'+ 
'left:'+(s.left=='auto'?'expression(((parseInt(this.parentNode.currentStyle.borderLeftWidth)||0)*-1)+'px')':prop(s.left))+';'+ 
'width:'+(s.width=='auto'?'expression(this.parentNode.offsetWidth+'px')':prop(s.width))+';'+ 
'height:'+(s.height=='auto'?'expression(this.parentNode.offsetHeight+'px')':prop(s.height))+';'+ 
'"/>'; 
return this.each(function() { 
if ( $('> iframe.bgiframe', this).length == 0 ) 
this.insertBefore( document.createElement(html), this.firstChild ); 
}); 
} 
return this; 
}; 
})(jQuery); 
//选择标签至文本域插件 
;(function(){ 
$.fn.extend({ 
iSelectTags:function(options){ 
var iset={ 
name:'.tagsbox',//表单或class或id名 
drop:$('#dropbox'),//弹出框定位 
pseudoClass:$('#dropbox>p>a'),//可选择的标签定位 
close:$('em.close'),//关闭按钮定位 
separator:',',//标签间分隔符,建议使用英文逗号 
maxCount:10 //默认限制个数,也可以设置表单的data-count值覆盖默认值 
} 
options = options || {}; 
$.extend(iset, options); 
var _input=$(iset.name); 
var _inputVal=_input.val(); 
var _arr=new Array(); //存放标签的数组 
var _left=_input.offset().left; //左绝对距离 
var _top=_input.offset().top+_input.outerHeight(); //上绝对距离,此处要加上表单的高度 
var _dropW=_input.outerWidth()-parseInt(_input.css('border-left-width'))-parseInt(_input.css('border-right-width'))-parseInt(iset.drop.css('paddingLeft'))-parseInt(iset.drop.css('paddingRight')); 
iset.drop.css({'position':'absolute','left':_left+'px','top':_top+'px','width':_dropW+'px'}); 
//弹出框的宽度,此处计算的是与表单实际宽度相等的.也可以直接在样式中定义. 
var _txt=null; 
var _maxCount=parseInt(_input.attr('data-count'));//限制选择个数 
if(isNaN(_maxCount)){ 
_maxCount=iset.maxCount 
} 
_input.click(function(){ 
iset.drop.show(); 
iset.drop.bgiframe();//调用bgiframe插件,解决ie6下select的z-index无限大问题 
}).bind('keyup change',function(){ 
//可以在此处扩展手动输入标签情况下的相关判断 
//if语句可避免清空重新选择时第一个字符为逗号 
if ($(this).val() == '') { 
_arr = new Array(); 
}else { 
_arr = $(this).val().split(iset.separator);//当用户手动删除或修改标签值后更新标签值 
} 
}); 
$(document).click(function(e){ 
//点击非弹出框区域时关闭弹出框 
//下面的 if语句是用来判断传入的是class还是id 
if(iset.name.charAt(0)=='#'){ 
if(e.target.id!=iset.name.substring(1)){ 
iset.drop.hide(); 
} 
}else if(iset.name.charAt(0)=='.'){ 
if(e.target.className!=iset.name.substring(1)){ 
iset.drop.hide(); 
} 
} 
}); 
iset.drop.click(function(e){ 
//阻止弹出框区域默认事件 
e.stopPropagation(); 
}); 
iset.pseudoClass.click(function(){ 
//标签选择 
_txt=$(this).text(); 
//下面的$.inArray是用来判断是否重复 
//若想反馈重复提示或走出限制个数提示,可改进下面的if语句 
if(($.inArray(_txt,_arr)==-1) && (_arr.length<_maxCount )){ 
//_arr.push(_txt); 
//_inputVal=_arr.join(iset.separator); 
_inputVal=$(this).text(); 
// if(_inputVal.charAt(0)==','){ 
// _inputVal.replace(/,/,'') 
// } 
_input.val(_inputVal); 
} 
}); 
//关闭按钮 
iset.close.click(function(){ 
iset.drop.hide(); 
}); 
} 
}); 
})(jQuery); 
//插件调用 
$(function(){ 
$('#demo').iSelectTags(); 
/* 
* 还可以传入参数调用 
$('#test').iSelectTags({ 
name:'#test', 
drop:$('.drop'), 
... 
}); 
*/ 
}); 
</script> 
</body> 
</html> 
</font>
</font>

关于选择标签至文本域效果,可多选/可过滤重复/可限制个数的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2011071572553.shtml方便下次再访问哦。

·上一篇： js点击列表文字，实现该行文字显示背景色的特效代码
·下一篇： 纯JS编写制作的自定义多级右键菜单

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

选择标签至文本域效果,可多选/可过滤重复/可限制个数

文章分类LIST >>返回首页

最新游戏

最新新闻