jQuery實現點擊文本框彈出熱門標簽的提示示例_網頁代碼站

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;

}

(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 = '

'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);

}

如果沒有出現提示框請刷新一下頁面再試~

value="點擊查看熱門標簽和您曾經使用過的標簽" οnclick="if(this.value=='點擊查看熱門標簽和您曾經使用過的標簽'){this.value='';this.className='m_tagsname'}">

關閉

溫馨提示：標簽間請用“空格”、“逗號”或“分號”隔開，用簡練的詞語概括您的博文內容。

熱門標簽：彩妝

href="javascript:void(0)" οnclick="checktag(this)">美發

οnclick="checktag(this)">美優博客

aaa

href="javascript:void(0)" οnclick="checktag(this)">bbb

οnclick="checktag(this)">天堂

eee

href="javascript:void(0)" οnclick="checktag(this)">fff

οnclick="checktag(this)">ggg

您使用過的標簽：軟件

href="javascript:void(0)" οnclick="checktag(this)">Delphi

οnclick="checktag(this)">博客

源碼

href="javascript:void(0)" οnclick="checktag(this)">彩妝

οnclick="checktag(this)">google

新浪

網頁代碼站 - 最專業的網頁代碼下載網站 - 致力為中國站長提供有質量的網頁代碼！

總結

以上是生活随笔為你收集整理的点击输入框弹出文字html,jQuery实现点击文本框弹出热门标签的提示效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。