javascript - 当按下输入文本字段时增加 div 元素的 paddingTop，否则减少

Question

我的 HTML 中的 div 元素内有一个 input 文本字段。我想在单击输入文本字段时增加 div 的 padding-top ，否则减少它。

• 我的HTML:

        <div id="quarter_tenure">
            <p id="date"><b>Occupancy Date</b> :<br>
                   <input type="text" id="datepicker" name="datefilter" value="" onclick="reset_size()"/></p>
        </div>
  

• 我的Javascript:

  function reset_size(){
      let x = document.getElementById("quarter_tenure");
  
      if(document.getElementById("datepicker") === document.activeElement){
          x.style.paddingTop="30em";
      } 
      else{
          x.style.paddingTop="15em";
      }
  }
  

但是当我执行代码时，无论我点击 input 文本字段，padding-top 都不会改变。这里有什么问题吗？我该如何修复它？

---

编辑:正如@Timothy Alexis Vass建议的那样，我已将他的代码添加到我的css中:

#quarter_tenure{
    display: flex;
    flex-direction: row;
    border:dotted;
    margin-top: 8em ;
    padding-top: 15em;
    border-width: 1px;
    border-radius: 5px;
    background-color: rgb(228, 255, 254);
    transition: 2s;
}

#quarter_tenure:focus-within {
    padding-top: 30em;
}

但是还是不行。

Answer 1

您可以使用两个事件onfocus和onfocusout:

function goUpSize() {
   document.getElementById("quarter_tenure").style.paddingTop = "6em";
}

function goDownSize() {
   document.getElementById("quarter_tenure").style.paddingTop = "1em";
}

 <div id="quarter_tenure">
        <p id="date">
            <b>Occupancy Date</b> :<br>
            <input type="text" id="datepicker" name="datefilter" value="" onfocus="goUpSize()" onfocusout="goDownSize()" />
        </p>
    </div>