新发布的 iOS 11 中 HTML 输入中的一个错误正在给在固定容器中具有输入元素的网站带来问题。这正是正在发生的事情以及一些可能的解决方法。
如果您有一个固定容器，并且它离屏幕底部足够近，迫使浏览器滚动为键盘腾出空间，则光标将放在文本输入之外。 这对我们来说是一个关键问题，因为我们的核心功能之一依赖于用户通过固定模式对话框进行的输入。
这对我们来说是一个关键问题，因为我们的核心功能之一依赖于用户通过固定模式对话框进行的输入。
【问题讨论】：
标签： jquery css input modal-dialog ios11
目前没有完美的解决方案。两个临时选项：
position: absolute（不推荐）选项 2 的详细信息：例如，您可以在对话框打开时将根 div（或任何具有滚动条的内容）设置为 overflowY='hidden'，并在对话框关闭时将其改回 overflowY=''。 （缺点：打开对话框/模式时浏览器会滚动到顶部）
注意：
【讨论】：
position: absolute 修复
这个解决方案帮助我修复了任何 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 和缓存插件，则需要清空所有缓存。
希望对您有所帮助。
【讨论】：
我不确定这是否与您面临的问题完全相同，但此解决方案对我有用：
.modal-open {位置：固定；}
【讨论】：
我也遇到了同样的问题，看看我的回答，也许对你有帮助：https://stackoverflow.com/a/46954486/8775824
【讨论】：
这个解决方案帮助我修复了 IOS11 输入问题： https://bitbucket.org/snippets/OlegChulakovStudio/RgBX8x
当您尝试在模式内滚动时，它还修复了烦人的背景滚动:)
总结： 您将 position:fixed 添加到 body、cash window.pageYOffset 并在弹出关闭后滚动到已兑现位置以防止移动到页面顶部。
【讨论】：
我在fixed header/banner 元素中有一个带有登录表单的 iOS 错误。标题中有一个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> 或类似名称，但我不会在这篇文章中讨论。你可以找到很多解决方案。
【讨论】：
试试这个对你有帮助
//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');
});
【讨论】：
这个错误也会影响 iframe 输入，所以我相信我找到的修复程序也会对模态框有所帮助。
所需要做的就是将以下 css 应用于 iframe 中的输入。
input:hover {
cursor: text
}
【讨论】：