如何防止iOS键盘使用CSS或JS将视图推离屏幕 [英] How to prevent iOS keyboard from pushing the view off screen with CSS or JS

问题描述

我有一个响应式网页，当您点击按钮时会打开一个模式.模式打开后，将其设置为使用固定位置占据页面的整个宽度和高度.模态中也有一个输入字段.

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.

在iOS设备上，当输入字段成为焦点时，键盘将打开.但是，当它打开时，它实际上会将整个文档向上推开，以使我的页面的一半位于视口的上方.我可以确认实际的html标记本身已被向上推以补偿键盘，并且没有通过CSS或JavaScript发生.

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.

推荐答案

第一

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

然后这个

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

这篇关于如何防止iOS键盘使用CSS或JS将视图推离屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！