input框 下面 緊跟著div彈出層,js取top left數值

來源:互聯網
上載者:User

<form> 
                    <input type="text" id="searchId" onkeyup="showSearch(this)" onblur="hideSearch(this)"/> 
                </form> 
                <div style="width:300px;height:500px;border:1px solid #817F82;display:none;position: absolute;" id="showInfo"> 
                     
                 
                </div> 
<script> 
    var setSearchFlag; 
    function showSearch(obj){ 
        clearSearchFlag(); 
        var w3c=(document.getElementById)? true:false;//w3c 標準 
        var ns6=(w3c && (navigator.appName=="Netscape"))? true: false;//Netscape瀏覽器 標準的W3C 
        var left,top; 
        if (!ns6){//判斷IE 
            var nLt = 0; 
            var nTp = 0; 
            var offsetParent = obj; 
         
            while (offsetParent!=null && offsetParent!=document.body) { 
                nLt += offsetParent.offsetLeft; 
                nTp += offsetParent.offsetTop; 
                offsetParentoffsetParent=offsetParent.offsetParent; 
            } 
            left = nLt; 
            top = nTp + obj.offsetHeight; 
        } else {//標準w3c 
            left = obj.offsetLeft -5; 
            top = obj.offsetTop + obj.offsetHeight; 
        } 
         
        $('#showInfo').css('display','block'); 
        $('#showInfo').css('top',top);   
             
    }    
    function hideSearch(obj){ 
        setSearchFlag = setTimeout(function(){$('#showInfo').css('display','none');},100); 
    } 
     
    function clearSearchFlag(){ 
        window.clearTimeout(setSearchFlag); 
    } 
     
 
</script> 

摘自 wwwyuanliang10000的專欄

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.