<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery实现点击文本框弹出热门标签的提示示例_网页代码站</title>
<style type="text/css">
body {
font-size:12pxfont-family:Arial
}
#m_tagsItem {
background:#fff
position:absolute
top:0px
left:0px
overflow:hidden
width:590px
*width:561px
width:561px\9
padding:10px
border:1px solid #ccc
z-index:1000
display:none
}
#m_tagsItem p {
text-align:left
line-height:22px
padding:2px 0
margin:0
border:0
}
#m_tagsItem span {
font-weight:bold
}
#m_tagsItem a {
margin:0 5px
}
.m_tagsname {
color:#999
vertical-align:middle
font-size:12px
text-indent:3px
line-height:20px
}
#tagClose {
font-size:12px
color:#888
cursor:pointer
position:absolute
top:2px
right:2px
}
</style>
<script src="http://www.webdm.cn/themes/script/jquery.js"></script>
<script language="javascript">
(function ($) {
$.fn.bgIframe = $.fn.bgiframe = function (s) {
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:blockposition:absolutez-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)
jQuery.fn.selectCity = function (targetId) {
var _seft = this
var targetId = $(targetId)
this.click(function () {
var A_top = $(this).offset().top + $(this).outerHeight(true) // 1
var A_left = $(this).offset().left
targetId.bgiframe()
targetId.show().css({ "position": "absolute", "top": A_top + "px", "left": A_left + "px" })
})
targetId.find("#tagClose").click(function () {
targetId.hide()
})
$(document).click(function (event) {
if (event.target.id != _seft.selector.substring(1)) {
targetId.hide()
}
})
targetId.click(function (e) {
e.stopPropagation() // 2
})
return this
}
$(function () {
$("#selecttags").selectCity("#m_tagsItem")
})
//为文本域连续赋值
function checktag(o) {
var tagid = function (id) { return document.getElementById(id) }
var tags = [] //存放标签,避免重复加入
var tagidSPLITCHAR = ' ' //设定分隔符,根据程序需求可改
var d = tagid('selecttags')
if (d.value)
tags = d.value.split(tagidSPLITCHAR)
var v = o.innerHTML //如果tag有别的值或者别的非innerHTML里体现的内容
var s = tagidSPLITCHAR + tags.join(tagidSPLITCHAR) + tagidSPLITCHAR
if (!new RegExp(tagidSPLITCHAR + v + tagidSPLITCHAR, 'g').test(s)) {
s += v
}
s = s.replace(new RegExp("(^" + tagidSPLITCHAR + "*|" + tagidSPLITCHAR + "*tagid)", "g"), '')
d.value = s
tags = s.split(tagidSPLITCHAR)
}
</script>
</head>
<body>
如果没有出现提示框请刷新一下页面再试~
<input type="text" id="selecttags" name="m_tagsname" class="m_tagsname" style="width: 577px"
value="点击查看热门标签和您曾经使用过的标签" onclick="if(this.value=='点击查看热门标签和您曾经使用过的标签'){this.value=''this.className='m_tagsname'}">
<div id="m_tagsItem" style="display: none">
<div id="tagClose">
关闭</div>
<p>
<span>温馨提示：</span>标签间请用“空格”、“逗号”或“分号”隔开，用简练的词语概括您的博文内容。</p>
<p>
<span>热门标签：</span><a href="javascript:void(0)" onclick="checktag(this)">彩妆</a><a
href="javascript:void(0)" onclick="checktag(this)">美发</a><a href="javascript:void(0)"
onclick="checktag(this)">美优博客</a><a href="javascript:void(0)" onclick="checktag(this)">aaa</a><a
href="javascript:void(0)" onclick="checktag(this)">bbb</a><a href="javascript:void(0)"
onclick="checktag(this)">天堂</a><a href="javascript:void(0)" onclick="checktag(this)">eee</a><a
href="javascript:void(0)" onclick="checktag(this)">fff</a><a href="javascript:void(0)"
onclick="checktag(this)">ggg</a></p>
<p>
<span>您使用过的标签：</span><a href="javascript:void(0)" onclick="checktag(this)">软件</a><a
href="javascript:void(0)" onclick="checktag(this)">Delphi</a><a href="javascript:void(0)"
onclick="checktag(this)">博客</a><a href="javascript:void(0)" onclick="checktag(this)">源码</a><a
href="javascript:void(0)" onclick="checktag(this)">彩妆</a><a href="javascript:void(0)"
onclick="checktag(this)">google</a><a href="javascript:void(0)" onclick="checktag(this)">新浪</a></p>
</div>
<br />
<p>
<a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！</p>
</body>
</html>
<p>留言内容 ID:10000</p><p><a href="javascript:void(0)" onclick="show_reply('10000')">回复</a></p>
<p id="p_10000">
<textarea name="reply"></textarea>
</p>
<script language="javascript">
<!--
function show_reply(id)
{
var dom_id = "p" + id
document.getElementsById(dom_id).style.display = "block"
}
-->
</script>
手动打给你的，虽然简单了点，但应该能满足你问题了。
