在选定的输入字段下方显示一个div？没有 jQuery答案

【问题标题】：display a div below a selected input field? No JQuery在选定的输入字段下方显示一个div？没有 jQuery
【发布时间】：2015-01-13 21:03:07
【问题描述】：

如何在每次用户关注输入字段时显示 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) + "%";

【问题讨论】：

你能详细说明一下，到目前为止你尝试了什么？
我已经做了一些事情。每当我关注输入字段时它就会出现，但问题是它没有正确显示在所选字段下方。我希望它像这样link
能否提供快照，
我给出的链接。我希望我的领域是这样的。出现在所选输入字段下方的下拉菜单。
为什么你甚至需要 javascript 呢？你可以只用 CSS 做到这一点：jsfiddle.net/qz57za86

标签： javascript html

【解决方案1】：

为什么要使用 JavaScript？这可以通过使用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;
}

更新

有点误解了这个问题，如果你需要像this fiddle那样动态定位div，你云使用：

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'));
    });
}

【讨论】：

在此示例中，您需要为每个输入添加一个 div。 OP 想要一个 div 重用是我的猜测。
我能想到的这个甜蜜解决方案的唯一问题是 div 在屏幕上运行时。 CSS 无法解决这个问题。

【解决方案2】：

尝试以下方法：

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

 }

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

【讨论】：