在选定的输入字段下面显示div？没有JQuery [英] display a div below a selected input field? No JQuery

问题描述

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

这是我的代码

$ b $（<（formSelectionFieldInput.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）+％;

解决方案

为什么使用javascript？这可以通过使用 CSS only 来获得。

HTML

 < div class =持有人> 
< input type =text/> 
< div class =dropdown> 
< p>测试< / p> 
< p>仅限Css< / p> 
< p>下拉式< / p> 
< / div> 
< / div> 
  

CSS

  .holder {
 position：relative; 
} 
 .dropdown {
 position：absolute; 
 border：1px纯红色; 
 display：none; 
} 
 
输入：focus + .dropdown {
 display：block; 
} 
  

更新
$ b

有点误会了这个问题，如果您需要像 div 1 /rel =nofollow>这个小提琴，你云使用：

HTML

 < div class =持有人> 
< input type =text/> 
 
< / div> 
< div class =holderstyle =margin-top：30px;> 
< input type =text/> 
< / div> 
< div class =dropdown> 
< p>测试< / p> 
< p>仅限Css< / p> 
< p>下拉式< / p> 
< / div> 
  

CSS

  .holder {
 position：relative; 
} 
 .dropdown {
 position：absolute; 
 border：1px纯红色; 
 display：none; 
 z-index：1; 
背景：白色; 
} 
 
输入：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'））; 
}）; 
} 
  

how to display a div everytime a user focus on a input field. there is already a div and it is hidden. the position of the div will change depending on the position of the selected field and it will be display below

this is my code

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) + "%";

解决方案

Why use javascript? This could be chieved by using 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

little bit misred the question, if You need to position div dynamically like in this fiddle, You cloud use:

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 to position dropdown 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？没有JQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！