I have website; a background image with an input. When I press on the input on my phone, the keyboard opens an everything gets pushed up. I would like instead the content to stay in place and keyboard just to go over the content without affecting(moving) it. I saw this solution:

input.onfocus = function () {
    window.scrollTo(0, 0);
    document.body.scrollTop = 0;
}

But it doesn't seem to work. I'm looking forward to your answers!

I have website; a background image with an input. When I press on the input on my phone, the keyboard opens an everything gets pushed up. I would like instead the content to stay in place and keyboard just to go over the content without affecting(moving) it. I saw this solution:

input.onfocus = function () {
    window.scrollTo(0, 0);
    document.body.scrollTop = 0;
}

But it doesn't seem to work. I'm looking forward to your answers!

• javascript
• html
• css
• keyboard

1 Answer 1

You can take a look at this StackOverflow post, but I'll summarize the most useful parts for you:

Start off with the input's CSS as position: fixed;. When in focus, change it to absolute. Here is an example with JS:

if (document.getElementById("fixed") == document.activeElement) {
    document.getElementById("fixed").class += "absolute"
}

Of course, that relies on CSS:

#fixed {
    ...
    position: fixed;
}
#fixed.absolute {
    position: absolute;
}

I hope this helps!