jQuery实现点击文本框弹出热门标签的提示效果

前端技术 2023/09/05 JavaScript
复制代码 代码如下:

<!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>jQuery实现点击文本框弹出热门标签的提示示例_网页代码站</title>
<style type=\"text/css\">
body {
font-size:12px;font-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: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);
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>

本文地址：https://www.stayed.cn/item/14663

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案