Как изменить положение поля ввода при фокусировке?

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, но только в том случае, если вы хотите использовать свой оригинальный метод 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" />

Answer 2

Почему бы не использовать css :focus Селектор?

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