Html iOS 11 Safari引导模式文本区位于光标外

使用iOS 11 safari，输入文本框光标位于输入文本框之外。我们不明白它为什么会有这个问题。正如你们所看到的，我的焦点文本框是电子邮件文本输入，但我的光标在它之外。只有iOS 11 Safari才会出现这种情况

---

我通过在主体上添加

position:fixed

，在打开模式时解决了这个问题。

---

希望这能对你有所帮助。

添加

位置：固定至
车身


$（文档）.ready（函数（$）{
$（“#myBtn”）。单击（函数（）{
$（#myModal”）.modal（“show”）；
});
$（“#myModal”）.on（'show.bs.modal'，function（）{
$（'body'）.addClass（'body-fixed'）；
});
$（“#myModal”）.on（'hide.bs.modal'，function（）{
$（'body'）.removeClass（'body-fixed'）；
});
});
。车身固定{
位置：固定；
宽度：100%；
}

开放模态
&时代；
形式
输入#1
输入#2
输入#3
输入#4
接近
令人沮丧的bug，感谢您识别它。否则，我会把我的iphone或我的头撞到墙上

最简单的修复方法是（1行代码更改）：

只需将以下CSS添加到html或外部CSS文件中

<style type="text/css">
.modal-open { position: fixed; }
</style>


@mdo的打开模式
@fat的开放模式
@getbootstrap的打开模式
…更多按钮。。。
&时代；
新消息
收件人：
信息：
接近
发送消息
这个问题不仅仅局限于引导，也不仅仅局限于Safari。这是IOS11中的一个全显示错误，在所有浏览器中都会出现。上述修复程序并不能在所有情况下修复此问题

此处详细报告了该错误：


据推测，他们已经将其作为一个bug报告给了苹果。
您是否尝试过为元视口设置视口拟合=覆盖

看看这个：
最简单/最干净的解决方案：

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

就个人而言，
位置：固定
自动滚动至顶部。真烦人

为避免惩罚其他设备和版本我仅将此修复程序应用于适当版本的iOS


**版本1-所有模态修复**
用于javascript/jQuery

$(document).ready(function() {

    // Detect ios 11_x_x affected  
    // NEED TO BE UPDATED if new versions are affected
    var ua = navigator.userAgent,
    iOS = /iPad|iPhone|iPod/.test(ua),
    iOS11 = /OS 11_0|OS 11_1|OS 11_2/.test(ua);

    // ios 11 bug caret position
    if ( iOS && iOS11 ) {

        // Add CSS class to body
        $("body").addClass("iosBugFixCaret");

    }

});

$(document).ready(function() {

    // Detect ios 11_x_x affected
    // NEED TO BE UPDATED if new versions are affected 
    (function iOS_CaretBug() {

        var ua = navigator.userAgent,
        scrollTopPosition,
        iOS = /iPad|iPhone|iPod/.test(ua),
        iOS11 = /OS 11_0|OS 11_1|OS 11_2/.test(ua);

        // ios 11 bug caret position
        if ( iOS && iOS11 ) {

            $(document.body).on('show.bs.modal', function(e) {
                if ( $(e.target).hasClass('inputModal') ) {
                    // Get scroll position before moving top
                    scrollTopPosition = $(document).scrollTop();

                    // Add CSS to body "position: fixed"
                    $("body").addClass("iosBugFixCaret");
                }
            });

            $(document.body).on('hide.bs.modal', function(e) {
                if ( $(e.target).hasClass('inputModal') ) {         
                    // Remove CSS to body "position: fixed"
                    $("body").removeClass("iosBugFixCaret");

                    //Go back to initial position in document
                    $(document).scrollTop(scrollTopPosition);
                }
            });

        }
    })();
});

用于CSS

/* Apply CSS to iOS affected versions only */
body.iosBugFixCaret.modal-open { position: fixed; width: 100%; }

/* Apply CSS to iOS affected versions only */
body.iosBugFixCaret.modal-open { position: fixed; width: 100%; }


**版本2-仅适用于选定模态**
我将函数修改为仅为类为
.inputmodel

只有带有输入的模态才会受到影响，以避免滚动到顶部

用于javascript/jQuery

$(document).ready(function() {

    // Detect ios 11_x_x affected  
    // NEED TO BE UPDATED if new versions are affected
    var ua = navigator.userAgent,
    iOS = /iPad|iPhone|iPod/.test(ua),
    iOS11 = /OS 11_0|OS 11_1|OS 11_2/.test(ua);

    // ios 11 bug caret position
    if ( iOS && iOS11 ) {

        // Add CSS class to body
        $("body").addClass("iosBugFixCaret");

    }

});

$(document).ready(function() {

    // Detect ios 11_x_x affected
    // NEED TO BE UPDATED if new versions are affected 
    (function iOS_CaretBug() {

        var ua = navigator.userAgent,
        scrollTopPosition,
        iOS = /iPad|iPhone|iPod/.test(ua),
        iOS11 = /OS 11_0|OS 11_1|OS 11_2/.test(ua);

        // ios 11 bug caret position
        if ( iOS && iOS11 ) {

            $(document.body).on('show.bs.modal', function(e) {
                if ( $(e.target).hasClass('inputModal') ) {
                    // Get scroll position before moving top
                    scrollTopPosition = $(document).scrollTop();

                    // Add CSS to body "position: fixed"
                    $("body").addClass("iosBugFixCaret");
                }
            });

            $(document.body).on('hide.bs.modal', function(e) {
                if ( $(e.target).hasClass('inputModal') ) {         
                    // Remove CSS to body "position: fixed"
                    $("body").removeClass("iosBugFixCaret");

                    //Go back to initial position in document
                    $(document).scrollTop(scrollTopPosition);
                }
            });

        }
    })();
});

用于CSS

/* Apply CSS to iOS affected versions only */
body.iosBugFixCaret.modal-open { position: fixed; width: 100%; }

/* Apply CSS to iOS affected versions only */
body.iosBugFixCaret.modal-open { position: fixed; width: 100%; }

用于HTML
将类inputModal添加到模式

<div class="modal fade inputModal" tabindex="-1" role="dialog">
    ...
</div>


...

Nota bene
javascript函数现在是自调用的


**更新iOS 11.3-错误已纠正覆盖模式css，并将其
位置从
固定
更改为
绝对

.modal {
position: absolute !important;
}

添加到#模态位置：绝对it修复与该位置相关的未来问题：修复
如果任何人正在寻找适用于IOS>11.2且不需要任何额外CSS的vanilla js修复：

(function() {
    if (!/(iPhone|iPad|iPod).*(OS 11_[0-2]_[0-5])/.test(navigator.userAgent)) return

    document.addEventListener('focusin', function(e) {
        if (!e.target.tagName == 'INPUT' && !e.target.tagName != 'TEXTAREA') return
        var container = getFixedContainer(e.target)
        if (!container) return
        var org_styles = {};
        ['position', 'top', 'height'].forEach(function(key) {
            org_styles[key] = container.style[key]
        })
        toAbsolute(container)
        e.target.addEventListener('blur', function(v) {
            restoreStyles(container, org_styles)
            v.target.removeEventListener(v.type, arguments.callee)
        })
    })

    function toAbsolute(modal) {
        var rect = modal.getBoundingClientRect()
        modal.style.position = 'absolute'
        modal.style.top = (document.body.scrollTop + rect.y) + 'px'
        modal.style.height = (rect.height) + 'px'
    }

    function restoreStyles(modal, styles) {
        for (var key in styles) {
            modal.style[key] = styles[key]
        }
    }

    function getFixedContainer(elem) {
        for (; elem && elem !== document; elem = elem.parentNode) {
            if (window.getComputedStyle(elem).getPropertyValue('position') === 'fixed') return elem
        }
        return null
    }
})()

它的作用是：

检查浏览器是否为iOS 11.0.0-11.2.5上的Safari
收听页面上的任何
聚焦事件

如果聚焦元素是
输入
或
文本区域
，并且包含在具有
固定
位置的元素中，则将容器位置更改为
绝对
，同时考虑
滚动顶部
和容器原始尺寸
在模糊时，将容器的位置恢复到
fixed
这个解决方案对我来说很有效，它在iOS上的所有浏览器上都能很好地工作

.safari-nav-force{
/* Allows content to fill the viewport and go beyond the bottom */
height: 100%;
overflow-y: scroll;
/* To smooth any scrolling behavior */
-webkit-overflow-scrolling: touch;
}

标文

var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
$('.modal').on('shown.bs.modal', function () {
    if (iOS && $('.modal').hasClass('in')){
        $('html,body').addClass('safari-nav-force');
    }
});
$('.modal').on('hidden.bs.modal', function () {
    if (iOS && !$('.modal').hasClass('in')){
        $('html,body').removeClass('safari-nav-force');
    }
});

如前所述：将
主体
的
样式.位置
属性
设置为
固定
解决了
iOS光标错位
问题

然而，这一收益是以被强制滚动到页面顶部为代价的

幸运的是，这个新的
UX
问题可以通过利用和解决而不需要太多开销

基本要点是在
安装时通过操纵
主体
元素的
样式.top
来抵消
滚动到顶部
。这是使用
ygap
变量捕获的
YOffset
值完成的

从那里，只需将
主体的
样式.top
重置为
0
，并使用
窗口重新格式化用户视图。当
卸载时，滚动到（0，ygap）

有关实际示例，请参见下文

// Global Variables (Manage Globally In Scope).
const body = document.querySelector('body') // Body.
let ygap = 0 // Y Offset.


// On Mount (Call When Mounting).
const onModalMount = () => {

  // Y Gap.
  ygap = window.pageYOffset || document.documentElement.scrollTop

  // Fix Body.
  body.style.position = 'fixed'

  // Apply Y Offset To Body Top.
  body.style.top = `${-ygap}px`

}


// On Dismount (Call When Dismounting).
const onModalDismount = () => {

  // Unfix Body.
  body.style.position = 'relative'

  // Reset Top Offset.
  body.style.top = '0'

  // Reset Scroll.
  window.scrollTo(0, ygap)

}

使用
position:fixed
和基于
scrollTop
的位置校正的解决方案效果非常好，但有些人（包括我）遇到了另一个问题：键盘插入符号/光标在输入集中时不显示

我观察到，插入符号/光标只有在我们不在身体上使用位置：固定时才起作用。因此，在尝试了几件事情之后，我放弃了使用这种方法，决定在
body
上使用
position:relative
，并使用
scrollTop
来更正model的顶部位置

见下面的代码：

var iosScrollPosition = 0;

function isIOS() {
   // use any implementation to return true if device is iOS
}

function initModalFixIOS() {
    if (isIOS()) {
        // Bootstrap's fade animation does not work with this approach
        // iOS users won't benefit from animation but everything else should work
        jQuery('#myModal').removeClass('fade');
    }
}

function onShowModalFixIOS() {
    if (isIOS()) {
        iosScrollPosition = jQuery(window).scrollTop();
        jQuery('body').css({
            'position': 'relative', // body is now relative
            'top': 0
        });
        jQuery('#myModal').css({
            'position': 'absolute', // modal is now absolute
            'height': '100%',
            'top': iosScrollPosition // modal position correction
        });
        jQuery('html, body').css('overflow', 'hidden'); // prevent page scroll
    }
}

function onHideModalFixIOS() {
    // Restore everything
    if (isIOS()) {
        jQuery('body').css({
            'position': '',
            'top': ''
        });
        jQuery('html, body').scrollTop(iosScrollPosition);
        jQuery('html, body').css('overflow', '');
    }
}

jQuery(document).ready(function() {
    initModalFixIOS();
    jQuery('#myModal')
        .on('show.bs.modal', onShowModalFixIOS)
        .on('hide.bs.modal', onHideModalFixIOS);
});

将您的apple设备更新为后，此问题将不再重现
iOS 11.3
这应该是答案。当模态可见时，引导将模态打开类添加到主体中。你只需要针对那个班级。我已经处理这个问题一段时间了。这个解决方案对我来说是不够的，因为添加位置固定会将页面卷回顶部。因此，当用户关闭modal时，他们处于不同的scro