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

时间:2017-02-04 11:31:42

标签: javascript html css

我正在努力解决这个问题,但我无法解决这个问题。我已经制作了这个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";  
    }
}

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

2 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分: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" />