我正在努力解决这个问题,但我无法解决这个问题。我已经制作了这个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,但我无法使用它。
答案 0 :(得分:1)
为什么不使用css :focus
选择器?
答案 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" />