Question

10

How to prevent iOS keyboard from pushing the view off screen with CSS or JS

rated 0 times [ 16] [ 6] / answers: 1 / hits: 50722 / 8 Years ago, wed, july 27, 2016, 12:00:00

I have a responsive web page that opens a modal when you tap a button. When the modal opens, it is set to take up the full width and height of the page using fixed positioning. The modal also has an input field in it.

On iOS devices, when the input field is focused, the keyboard opens. However, when it opens, it actually pushes the full document up out of the way such that half of my page goes above the top of the viewport. I can confirm that the actual html tag itself has been pushed up to compensate for the keyboard and that it has not happened via CSS or JavaScript.

Has anyone seen this before and, if so, is there a way to prevent it, or reposition things after the keyboard has opened? It's a problem because I need users to be able to see content at the top of the modal while, simultaneously, I'd like to auto-focus the input field.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

bryonk

Add To Favorites

Follow

Total Points: 161

Total Questions: 116

Total Answers: 107

Location: Albania

Member since Sun, Nov 22, 2020

4 Years ago

answered 8 Years ago miles · Accepted Answer

first

<script type=text/javascript>

 $(document).ready(function() {

     document.ontouchmove = function(e){

          e.preventDefault();

          }

 });

then this

input.onfocus = function () {

    window.scrollTo(0, 0);

    document.body.scrollTop = 0;

}