input框 下面 緊跟著div彈出層,js取top left數值 – Javascript教程_JS教程_技術文章 – 程式設計聯盟

<form> 
                    <input type="text" id="searchId" onkeyup="showSearch(this)" onblur="hideSearch(this)"/> 
                </form> 
                <p style="width:300px;height:500px;border:1px solid #817F82;display:none;position: absolute;" id="showInfo"> 
                     
                 
                </p> 
<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的專欄

發佈留言