javascript - 聚焦时如何更改输入字段的位置？

Question

我正在尝试解决此问题，但我无法使其正常工作。我做了这个 JSFiddle 来说明我的问题:

https://jsfiddle.net/5rj2jtym/1/

<div class="wrapper">
   <p>Test header</p>
</div>

<input type="text" class="bla" onclick="changepos()" placeholder="put some text here" />

还有 JS:

function changepos() {
    if(document.getElementsByClassName("bla")[0].style.top == '300px'){
        document.getElementsByClassName("bla")[0].style.top="0px";    
    }else{
        document.getElementsByClassName("bla")[0].style.top="300px";  
    }
}

我想要实现的是，输入字段应该取代您在 fiddle 中看到的段落/标题。因此，当有人聚焦/点击输入字段时，输入字段应该向上移动(最好有动画)，这样我们就有了很好的交互。我用 JavaScript 试过了，但我无法让它工作。

Answer 1

我肯定会推荐上面的 CSS 方法，但以防万一你想使用你原来的 JavaScript 方法。

function changepos(input) {
  input.style.top = "0";
  input.style.transition = "all 0.8s";
}

function resetpos(input) {
  input.style.top = "300px";
  input.style.transition = "all 0.8s";
}

input {
  width: 100%;
  top: 300px;
  position: relative;
}

<div class="wrapper">

  <p>
    Test header
  </p>
</div>

<input type="text" class="bla" onfocus="changepos(this)" onblur="resetpos(this)" placeholder="put some text here" />