我正在尝试解决此问题,但我无法使其正常工作。我做了这个 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";
}
}
我想要实现的是,输入字段应该取代您在 fiddle 中看到的段落/标题。因此,当有人聚焦/点击输入字段时,输入字段应该向上移动(最好有动画),这样我们就有了很好的交互。我用 JavaScript 试过了,但我无法让它工作。
最佳答案
我肯定会推荐上面的 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" />
关于javascript - 聚焦时如何更改输入字段的位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42039853/