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

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

我要实现的是，输入字段应该代替小提琴中可以看到的段落/标题。 因此，当某人聚焦/单击输入字段时，输入字段应向上移动（最好是带有动画），以便我们进行良好的交互。 我使用JavaScript进行了尝试，但无法正常工作。

Answer 1

为什么不使用CSS :focus Selector？

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" />