Javascript 是否在所选输入字段下方显示div？没有JQuery

如何在用户每次关注输入字段时显示div。已经有一个div，它是隐藏的。div的位置将根据所选字段的位置而变化，并将显示在下面

这是我的密码

formFieldListWrapper.style.top=（（（formSelectedFieldInput.OffsetUp>（formWrapper.OffsetHight/2））？（（formSelectedFieldInput.OffsetHight-（formWrapper.OffsetHight/2））-（formSelectedFieldInput.OffsetHight+formWrapper.OffsetHight*0.02））：（formSelectedFieldInput.OffsetHight））/formWrapper.OffsetHight）*100+“%；
formFieldListWrapper.style.left=（（formSelectedFieldInput.offsetLeft/formWrapper.offsetWidth）*100）+“%”；

尝试以下操作：

 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";

 }

var nodes=form.querySelectorAll（“输入”）//替换为表单元素
对于（变量i=0；i

---

此代码将焦点事件设置为表单中的所有输入。

为什么使用javascript？这可以通过使用

HTML

更新

有点误解了这个问题，如果您需要像中一样动态定位

div

，您可以使用：

HTML

定位下拉列表div的Javascript

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

var inputs=document.querySelectorAll（'input'）；
对于（变量i=0；i

您能详细说明一下，到目前为止您尝试了什么吗？我已经做了一些事情。每当我聚焦在一个输入字段时，它就会出现，但问题是它没有正确地出现在所选字段的下方。我希望它是像这个一样，你能提供一个快照，我给的链接。我希望我的领域与之类似。一个下拉列表出现在一个选定的输入字段下面。为什么你甚至需要javascript呢？您可以只使用CSS来实现这一点：在这个示例中，您需要为每个输入添加一个div。OP想要一个div被重用是我的猜测。我能想到的唯一问题是当div在屏幕上运行时。CSS无法解决这个问题。

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

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

<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>

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

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

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