Question

新发布的iOS 11中的HTML输入中的错误为具有固定容器中的输入元素的网站带来了问题。以下是正在发生的事情以及一些可能的解决方法。

如果你有一个固定的容器并且它足够靠近屏幕的底部，迫使浏览器滚动以为键盘腾出空间，则光标将被放在文本输入之外。这对我们来说是一个关键问题，因为我们的核心功能之一依赖于通过固定模态对话框的用户输入。

这对我们来说是一个关键问题，因为我们的核心功能之一依赖于通过固定模态对话框的用户输入。

Answer 1

现在有没有完美修复它。两个临时选项：

将对话框/模态更改为position: absolute（不推荐）
尝试在模态/对话框打开时删除背景滚动，并在对话框关闭时恢复它。

选项2的详细信息：例如，您可以在对话框打开时将根div（或具有滚动条的任何内容）设置为overflowY='hidden'，并在对话框关闭时将其更改回overflowY=''。（缺点：打开对话框/模态时，浏览器将滚动到顶部）

注意：

请记住在触发器修复时检测OS /浏览器，否则您可能会在IE中遇到问题。
关注this thread以获取有关此问题的最新动态。

Answer 2

此解决方案帮助我修复了任何IOS模型。

首先，只使用此代码定位IOS设备。

//target ios
var isMobile = {
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    }
}
if(isMobile.iOS()) { 
      jQuery('body').addClass('apple-ios');
}

然后将此代码放入您的css：

body.apple-ios.modal-open {
  position: fixed;
  width:100%;
}

如果您使用的是wordpress和缓存插件，则需要清空所有缓存。

希望这对你有所帮助。

Answer 3

我不确定这是否与您面临的问题完全相同，但此解决方案对我有用：

.modal-open {position：fixed;}

iOS 11 Safari bootstrap modal text area outside of cursor

Answer 4

我有同样的问题，请看看我的答案，也许它会对你有所帮助：https://stackoverflow.com/a/46954486/8775824

Answer 5

此解决方案帮我修复了IOS11输入问题： https://bitbucket.org/snippets/OlegChulakovStudio/RgBX8x

当您尝试在模态内滚动时，它还修复了烦人的背景滚动：）

要点：你添加位置：固定到body，cash window.pageYOffset并在弹出关闭后滚动到兑现位置，以防止移动到页面顶部。

Answer 6

我在这个iOS bugg中有一个fixed标题/横幅元素内的登录表单。标题内有button，用登录表单打开模态窗口。实际的模态窗口位于absolute，但标题/横幅元素为fixed。

只需几行代码就可以轻松解决问题。所以我正在做的是我正在将fixed容器更改为absolute，但只有当登录表单打开时，它才能使用输入标记创建魔法。

jQuery的：

$('.ios #mob-login').on('click', function(){
  $('body').toggleClass('login-open');
});

CSS：

.ios body.login-open #banner-wrapper {
  position: absolute;
}

所以现在固定的标题变成绝对的。如果是iOS，则仅在登录框打开时。

如果遇到类似的问题，这可能会解决您的问题。

聚苯乙烯。您需要一个脚本来检测并将类名ios / ios11写入<html>或类似名称，但我不会在本文中进行讨论。你可以找到很多解决方案。

Answer 7

试试这可能会对你有所帮助

//HTML
<head>
     <style>
          .ios-11-body-fixed {
             position: fixed;
             width: 100%;
          } 
     </style>
</head>

//jQuery
$("#leadgen-modal").on('show.bs.modal', function () {
    $('body').addClass('ios-11-body-fixed');
});
$('#leadgen-modal').on('hidden.bs.modal', function () {
           $('body').removeClass('ios-11-body-fixed');
});

Answer 8

此错误也会影响iframe输入，因此我相信找到的修复程序也将有助于使用模式。

所有要做的就是将以下CSS应用于iframe中的输入。

input:hover {
   cursor: text
}

下面是一个示例：https://codepen.io/ryanoutloud/project/full/AEKGjj

如何修复固定模态bug中的iOS 11输入元素

8 个答案: