Question

我正在努力解决这个问题，但我无法解决这个问题。我已经制作了这个JSFiddle来说明我的问题：

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

我想要实现的是，输入字段应该取代你可以在小提琴中看到的段落/标题。因此，当有人聚焦/点击输入字段时，输入字段应向上移动（最好带动画），以便我们有一个很好的交互。我尝试使用JavaScript，但我无法使用它。

Answer 1

为什么不使用css :focus选择器？

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

Answer 2

我肯定会推荐上面的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" />

如何在关注时更改输入字段的位置？

2 个答案: