[英]How to change position of input field when focused on?
I am trying to fix this, but I can't get it to work. 我正在尝试解决此问题,但无法使其正常工作。 I have made this JSFiddle to illustrate my problem:
我做了这个JSFiddle来说明我的问题:
https://jsfiddle.net/5rj2jtym/1/ 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" />
And the JS: 和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";
}
}
What I want to achieve, is that the input field should take the place of the paragraph / header you can see in the fiddle. 我要实现的是,输入字段应该代替小提琴中可以看到的段落/标题。 So when someone focuses / clicks on the input field, the input field should move up (preferably with an animation) so that we have a nice interaction.
因此,当某人聚焦/单击输入字段时,输入字段应向上移动(最好是带有动画),以便我们进行良好的交互。 I tried it with JavaScript, but I can't get it to work.
我使用JavaScript进行了尝试,但无法正常工作。
Why not use the css :focus
Selector? 为什么不使用CSS
:focus
Selector?
https://jsfiddle.net/5rj2jtym/12/ https://jsfiddle.net/5rj2jtym/12/
I'd definitely recommend the above CSS method, but just in case you want to use your original JavaScript method. 我绝对会推荐上述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" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.