So verhindern Sie, dass die iOS-Tastatur die Ansicht mit CSS oder JS aus dem Bildschirm verschiebt

Question

Ich habe eine responsive Webseite, die ein Modal öffnet, wenn Sie auf eine Schaltfläche tippen. Wenn das Modal geöffnet wird, wird es so eingestellt, dass es die volle Breite und Höhe der Seite mit fester Positionierung annimmt. Das Modal hat auch ein Eingabefeld.

Wenn das Eingabefeld auf iOS-Geräten fokussiert ist, wird die Tastatur geöffnet. Wenn es jedoch geöffnet wird, wird das gesamte Dokument tatsächlich aus dem Weg geschoben, sodass die Hälfte meiner Seite über den oberen Bereich des Ansichtsfensters hinausgeht. Ich kann bestätigen, dass das eigentliche html-Tag selbst nach oben gedrückt wurde, um die Tastatur zu kompensieren, und dass es nicht über CSS oder JavaScript passiert ist.

Hat jemand das schon einmal gesehen, und wenn ja, gibt es eine Möglichkeit, das zu verhindern oder Dinge neu zu positionieren, nachdem die Tastatur geöffnet wurde? Es ist ein Problem, weil ich Benutzer in der Lage sein muss, Inhalte an der Spitze des Modals zu sehen, während ich gleichzeitig das Eingabefeld automatisch fokussieren möchte.

Answer 1

erste

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

dann diese

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

Answer 2

Sowohl IOS8- als auch Safari-Browser verhalten sich für input.focus(), das nach dem Laden der Seite auftritt, gleich. Beide Zoom auf das Element und bringen die Tastatur nach oben. (Nicht sicher, ob diese Hilfe sein wird, aber haben Sie versucht, so etwas wie dies mit?)

HTML

<input autofocus> 

JS ist

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; 
} 

ALso müssen Sie einen User-Agent Abhilfe verwenden, können Sie es für alle IOS-Versionen verwenden

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