光标外的 iOS 11 Safari 引导模式文本区域

Question

使用 iOS 11 safari，输入文本框光标位于输入文本框之外。我们不明白为什么会出现这个问题。如您所见，我的焦点文本框是电子邮件文本输入，但我的光标在它外面。这只发生在 iOS 11 Safari 上

原文由 kekkeme 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我通过在打开模式时向正文添加 position:fixed 来解决这个问题。希望这会帮助你。

原文由 Nattawat Tarweesripayap 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

就个人而言， position: fixed 自动滚动到顶部。很烦人！

为了避免惩罚其他设备和版本， 我仅将此修复程序应用于相应版本的 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");

    }

});

对于 CSS

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

---

**版本 2 - 仅限选定的模态**

我修改了函数以仅针对具有类 .inputModal 的选定模态触发

只有带有输入的模式应该受到影响，以避免滚动到顶部。

对于 javascript/jQuery

 $(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%; }

对于 HTML ，将类 inputModal 添加到模态

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

注意 javascript 函数现在是自调用的

---

**更新 iOS 11.3 - 修正错误 😃🎉 **

从 iOS 11.3 开始，该错误已得到纠正。无需在 OS 11_ 中测试 iOS11 = /OS 11_0|OS 11_1|OS 11_2/.test(ua);

但要小心，因为 iOS 11.2 仍在广泛使用（截至 2018 年 4 月）。看

状态 1

状态 2

原文由 Mike Casan Ballester 发布，翻译遵循 CC BY-SA 3.0 许可协议