Cách ngăn bàn phím iOS đẩy màn hình tắt màn hình bằng CSS hoặc JS

Question

Tôi có trang web đáp ứng mở ra một phương thức khi bạn nhấn vào nút. Khi phương thức mở ra, nó được thiết lập để chiếm toàn bộ chiều rộng và chiều cao của trang bằng cách sử dụng định vị cố định. Phương thức cũng có một trường đầu vào trong đó.

Trên thiết bị iOS, khi trường nhập được lấy nét, bàn phím sẽ mở ra. Tuy nhiên, khi nó mở ra, nó thực sự đẩy các tài liệu đầy đủ lên trên con đường như vậy mà một nửa của trang của tôi đi trên đầu trang của khung nhìn. Tôi có thể xác nhận rằng chính thẻ html thực tế đã được đẩy lên để bù đắp cho bàn phím và nó đã không xảy ra thông qua CSS hoặc JavaScript.

Có ai nhìn thấy điều này trước và, nếu có, có cách nào để ngăn chặn hoặc định vị lại mọi thứ sau khi bàn phím đã mở không? Đó là một vấn đề vì tôi cần người dùng có thể xem nội dung ở đầu phương thức trong khi, đồng thời, tôi muốn tự động lấy tiêu điểm cho trường nhập.

Answer 1

đầu tiên

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

thì đây

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

Answer 2

Cả hai trình phát IOS8 và Safari đều hoạt động tương tự cho input.focus() xảy ra sau khi tải trang. Cả hai đều zoom vào yếu tố và đưa lên bàn phím. (Không quá chắc chắn nếu điều này sẽ giúp đỡ nhưng có bạn đã cố gắng sử dụng một cái gì đó như thế này?)

HTML LÀ

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

cũng có thể bạn sẽ phải sử dụng một workaround user-agent, bạn có thể sử dụng nó cho tất cả các phiên bản IOS

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