在選定的輸入字段下面顯示一個div？否JQuery

Question

如何每次用戶關注輸入字段時顯示div。已經有一個div，它是隱藏的。在div的位置將取決於所選擇的場的位置而改變，這將是下面

顯示這是我的代碼

formFieldListWrapper.style.top = ((((formSelectedFieldInput.offsetTop > (formWrapper.offsetHeight/2))?((formSelectedFieldInput.offsetTop-(formWrapper.offsetHeight/2))-(formSelectedFieldInput.offsetHeight+formWrapper.offsetHeight*0.02)):(formSelectedFieldInput.offsetTop))/formWrapper.offsetHeight)*100) + "%"; 
formFieldListWrapper.style.left = ((formSelectedFieldInput.offsetLeft/formWrapper.offsetWidth)*100) + "%"; 

Answer 1

嘗試以下方法：

formSelectedFieldInput.addEventListener("focus", setDivToInput, false); 

function setDivToInput(e) 
{ 
     var inputElement = e.target; //e.target refers to the element that fired the event. 
     formFieldListWrapper.style.top = inputElement.offsetTop + formFieldListWrapper.offsetHeight + "px"; 
     formFieldListWrapper.style.left= inputElement.offsetLeft + "px"; 
     formFieldListWrapper.style.display = "block"; 
} 

第一行將焦點事件添加到輸入。這根據它在頁面上的位置將div設置爲輸入。這是非常基本的，並且在屏幕div運行時表現不佳。你需要爲此添加邏輯。在一個形式

var nodes = form.querySelectorAll("input"); //replace with your form element 
for (var i = 0; i < nodes.length; ++i) 
{ 
    nodes[i].addEventListener("focus", setDivToInput, false); 
} 

function setDivToInput(e) 
{ 
     var node = e.target; 
     formFieldListWrapper.style.top = node.offsetTop + formFieldListWrapper.offsetHeight + "px"; 
     formFieldListWrapper.style.left= node.offsetLeft + "px"; 
     formFieldListWrapper.style.display = "block"; 

} 

此代碼

現在對於多個輸入設置焦點事件表單中的所有輸入。

Answer 2

爲什麼使用javascript？這可以通過使用chieved CSS only

HTML

<div class="holder"> 
    <input type="text" /> 
    <div class="dropdown"> 
     <p>Testing</p> 
     <p>Css ONLY</p> 
     <p>Dropdown</p> 
    </div> 
</div> 

CSS

.holder { 
    position: relative; 
} 
.dropdown { 
    position: absolute; 
    border: 1px solid red; 
    display: none; 
} 

input:focus + .dropdown { 
    display: block; 
} 

UPDATE

點點misred的問題，如果你需要定位div動態像this fiddle ，你雲使用：

HTML

<div class="holder"> 
    <input type="text" /> 

</div> 
<div class="holder" style="margin-top: 30px;"> 
    <input type="text" /> 
</div> 
<div class="dropdown"> 
    <p>Testing</p> 
    <p>Css ONLY</p> 
    <p>Dropdown</p> 
</div> 

CSS

.holder { 
    position: relative; 
} 
.dropdown { 
    position: absolute; 
    border: 1px solid red; 
    display: none; 
    z-index: 1; 
    background: white; 
} 

input:focus + .dropdown { 
    display: block; 
} 

Javascript功能來定位下拉DIV

var inputs = document.querySelectorAll('input'); 
for (var i = 0; i < inputs.length; i++) { 
    inputs[i].addEventListener('focus', function(){ 
     this.parentNode.appendChild(document.querySelector('.dropdown')); 
    }); 
}