"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=gbk" />
<title>選擇標簽至文本域效果,可多選/可過濾重復/可限制個數@Mr.Think</title>
<style>
/*reset css*/
body,input{letter-spacing:1px;font:12px/1.5 tahoma,arial,\5b8b\4f53}
body{color:red;}
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{position:relative;}
#demo input{_margin-top:1px;padding-left:5px;border:1px solid
#999;width:700px;height:20px;font-size:14px;color:#000}
#dropbox{position:absolute;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>
<script type="text/javascript">
window.onload = function ()
{
var oDemo = document.getElementById("demo");
var oInput = document.getElementsByTagName("input")[0];
var oDropbox = document.getElementById("dropbox");
var aA = oDropbox.getElementsByTagName("a");
var oClose = document.getElementsByTagName("em")[0];
var i = 0;
oInput.onclick = function (event)
{
oDropbox.style.display = "block";
oDropbox.style.top = oDemo.offsetHeight + "px";
oDropbox.style.left = oInput.offsetLeft + "px";
oDropbox.style.width = oInput.clientWidth - 10 + "px";
(event || window.event).cancelBubble = true;
};
for (i = 0; i < aA.length; i++)
{
aA[i].onclick = function (event)
{
if(oInput.value==oInput.defaultValue){
oInput.value= this.innerHTML;
}else if(oInput.value.indexOf(this.innerHTML)==-1){
oInput.value += " "+this.innerHTML;
}
(event || window.event).cancelBubble = true; //取消變量累加
};
}
oDropbox.onclick = function (event)
{
(event || window.event).cancelBubble = true;
};
document.onclick = oClose.onclick = function ()
{
oDropbox.style.display = "none";
};
};
</script>
</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><a href="javascript:void(0)">時光漫步</a><a
href="javascript:void(0)">JavaScript</a></p>
</div>
<br style="clear:both" />
</div>
</body>
</html>
記得給分咯