如何防止iOS键盘使用CSS或JS将视图推离屏幕

Question

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

在iOS设备上,当输入字段被聚焦时,键盘将打开.然而,在打开时,它实际上推动了完整的文档了出来,使得我的网页的一半以上去的视口顶部的方式.我可以确认实际的html标签本身已被推高以补偿键盘,并且它没有通过CSS或JavaScript发生.

有没有人见过这个,如果有的话,有没有办法防止它,或在键盘打开后重新定位的东西？这是一个问题,因为我需要用户能够在模态顶部看到内容,同时,我想自动聚焦输入字段.

Answer 1

第一

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

那么这个

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

Answer 2

对于任何在 React 中遇到这个问题的人，我已经设法通过调整 @ankurJos 解决方案来修复它，如下所示：

const inputElement = useRef(null);

useEffect(() => {
  inputElement.current.onfocus = () => {
    window.scrollTo(0, 0);
    document.body.scrollTop = 0;
  };
});

<input ref={inputElement} />