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

为什么要使用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'));
    });
}

Answer 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设置为输入。这是非常基本的，当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";

 }

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

在选定的输入字段下方显示div？没有JQuery

2 个答案: