How to prevent iOS keyboard from tapping the screen using CSS or JS

Question

I have a responsive webpage that opens a modality at the click of a button. When the modal mode opens, it is set to full page width and height using fixed positioning. The module also has an input field.

On iOS devices, when the input field is focused, the keyboard opens. However, when it opens, it actually pushes the full document out of the way, so that half of my page goes beyond the top of the viewport. I can confirm that the actual html tag was clicked to compensate for the keyboard and that this did not happen using CSS or JavaScript.

Has anyone seen this before, and if so, is there a way to prevent it or change position after opening the keyboard? This is a problem because I need users to be able to see the content at the top of the modal file, while at the same time I would like to autofocus the input field.

Answer 1

first

 <script type="text/javascript"> $(document).ready(function() { document.ontouchmove = function(e){ e.preventDefault(); } }); 

that is

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

Answer 2

For anyone who came across this in React, I managed to fix this by adapting the @ankurJos solution as follows:

 const inputElement = useRef(null); useEffect(() => { inputElement.current.onfocus = () => { window.scrollTo(0, 0); document.body.scrollTop = 0; }; }); <input ref={inputElement} /> 

Answer 3

Both iOS8 and Safari bowsers behave the same for input.focus () that occurs after the page loads. They both approach the element and raise the keyboard. (Not too sure if this will help, but have you tried using something like this?)

HTML

 <input autofocus> 

Js

 for (var i = 0; i < 5; i++) { document.write("<br><button onclick='alert(this.innerHTML)'>" + i + "</button>"); } //document.querySelector('input').focus(); 

CSS

 button { width: 300px; height: 40px; } 

In addition, you will have to use a workaround for the user agent, you can use it for all versions of iOS

 if (!/iPad|iPhone|iPod/g.test(navigator.userAgent)) { element.focus(); } 

Answer 4

In some situations, this problem can be resolved by reorienting the input element.

 input.onfocus = function () { this.blur(); this.focus(); }