jQuery는 텍스트 box_jquery를 클릭할 때 인기 태그를 팝업하는 프롬프트 효과를 구현합니다.-JS 튜토리얼-php.cn

코드 복사 코드는 다음과 같습니다. 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="点击查看热门标签和您曾经使用过的标签" onclick="if(this.value=='点击查看热门标签和您曾经使用过的标签'){this.value='';this.className='m_tagsname'}"> 关闭 알림: 태그를 구분하려면 "공백", "쉼표" 또는 "세미콜론"을 사용하고, 블로그 게시물을 요약하려면 간결한 단어를 사용하세요. 콘텐츠. 인기 태그: 메이크업 href="javascript:void(0)" onclick="checktag(this)">미용 onclick="checktag(this)">Meiyou 블로그 aaa 🎜>href="javascript:void(0)" onclick="checktag(this)">bbb onclick=" checktag(this) ">파라다이스 eee href=" javascript:void(0 )" onclick="checktag(this)">fff onclick="checktag(this)">ggg 사용한 태그: 소프트웨어 href="javascript:void(0)" onclick="checktag(this)">Delphi onclick="checktag(this)">블로그 소스 코드&lt ;/a> href="javascript:void(0)" onclick="checktag(this)">색상 메이크업 onclick="checktag(this )">google Sina

웹 코드 스테이션&lt ;/a> 웹사이트 다운로드 - 중국 웹마스터를 위한 고품질 웹 코드 제공을 위해 최선을 다하고 있습니다!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

jQuery는 텍스트 box_jquery를 클릭할 때 인기 태그를 팝업하는 프롬프트 효과를 구현합니다.