web-dev-qa-db-ja.com

iOS iPadキーボードを開いたときの位置の破損を修正

[検索フォーム]テキストボックスフィールドをクリックしたときのヘッダーの位置区切りが修正されました。単にページの上部から切り離され（そこに固定されているため）、仮想キーボードが開くとページの中央でフローティングが開始されます。

通常：

enter image description here

壊れた：

enter image description here

safarimobile-safari
64
coldblooded01

私はこのソリューションが本当に好きです（ http://dansajin.com/2012/12/07/fix-position-fixed/ ）。それを小さなjQueryプラグインにパッケージ化したので、次のことができました。

  • クラスを取得する親を設定します
  • これが適用される要素を設定します（「textarea」と「select」を忘れないでください）。
  • 親クラス名を設定します
  • 連鎖させる
  • 複数回使用できるようにする

コード例：

$.fn.mobileFix = function (options) {
    var $parent = $(this),

    $(document)
    .on('focus', options.inputElements, function(e) {
        $parent.addClass(options.addClass);
    })
    .on('blur', options.inputElements, function(e) {
        $parent.removeClass(options.addClass);

        // Fix for some scenarios where you need to start scrolling
        setTimeout(function() {
            $(document).scrollTop($(document).scrollTop())
        }, 1);
    });

    return this; // Allowing chaining
};

// Only on touch devices
if (Modernizr.touch) {
    $("body").mobileFix({ // Pass parent to apply to
        inputElements: "input,textarea,select", // Pass activation child elements
        addClass: "fixfixed" // Pass class name
    });
}

編集：不要な要素を削除

18
martinedwards

私たちの場合、これはユーザーがスクロールするとすぐに修正されます。これが、スクロールをシミュレートするために使用してきた修正です。

$(document).on('blur', 'input, textarea', function () {
    setTimeout(function () {
        window.scrollTo(document.body.scrollLeft, document.body.scrollTop);
    }, 0);
});
10
basarat

これまで試してきたすべてのソリューションは、1つのシナリオに失敗しました。キーボードがiPhoneに表示されるとすぐに、上部の固定ナビゲーションバーが消えます。キーボードが表示されている場合でも、固定要素を同じ位置に固定したい場合はどうしますか？これを可能にする簡単な解決策は、キーボードが表示されている間（つまり、入力フィールド内にフォーカスを置いたまま）ページをスクロールするときに、固定要素を上部に固定したままにするというボーナスがあります。

// Let's assume the fixed top navbar has id="navbar"
// Cache the fixed element
var $navbar = $('#navbar');

function fixFixedPosition() {
  $navbar.css({
    position: 'absolute',
    top: document.body.scrollTop + 'px'
  });
}
function resetFixedPosition() {
  $navbar.css({
    position: 'fixed',
    top: ''
  });
  $(document).off('scroll', updateScrollTop);
}
function updateScrollTop() {
  $navbar.css('top', document.body.scrollTop + 'px');
}

$('input, textarea, [contenteditable=true]').on({
  focus: function() {
    // NOTE: The delay is required.
    setTimeout(fixFixedPosition, 100);
    // Keep the fixed element absolutely positioned at the top
    // when the keyboard is visible
    $(document).scroll(updateScrollTop);
  },
  blur: resetFixedPosition
});

デモを見るには、iPhoneにアクセスしてください。

http://s.codepen.io/thdoan/debug/JWYQeN/gakeYJYOXDPk

requestAnimationFrameを使用したバージョンがありますが、パフォーマンスが向上するようには見えなかったため、最初のバージョンはよりシンプルであるため、私は最初のバージョンを使用しました。

http://s.codepen.io/thdoan/debug/VpvJNX/yYMyLDLBwpRk

3
thdoan

JQueryを使用したハッキン​​グソリューションを次に示します。

HTML：

<label for="myField">My Field:</label> <input type="text" id="myField" />

<!-- ... other markup here .... -->

<div class="ad_wrapper">my fixed position container</div>

CSS：

.ad_wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background-color: rgba(0,0,0,0.75);
    color: white;
    text-align: center;
}
.unfixed {
    position: relative;
    left: auto;
    bottom: auto;
}

JS：

$(function () {
    adWrapper = $('.ad_wrapper');

    $(document).on('focusin', 'input, textarea', function() {
        adWrapper.addClass('unfixed');
    })
    .on('focusout', 'input, textarea', function () {
        adWrapper.removeClass('unfixed');
    });
});
3
Silkster

これに基づいて 良好な分析 この問題について、私はこれをcssのhtmlおよびbody要素で使用しました：

html,body{
    -webkit-overflow-scrolling : touch !important;
    overflow: auto !important;
    height: 100% !important;
}

それは私にとって素晴らしい仕事です。

2
prashanth padala

あなたがする必要があるのは、ユーザーがテキストを編集している間に本文の位置を固定に設定し、ユーザーが終了したらそれを静的に復元することです。これは、フォーカス/ぼかし（下図を参照）で行うことができます。または、ユーザーがモーダルを開いている場合は、モーダルの開閉で行うことができます。

$("#myInput").on("focus", function () {
    $("body").css("position", "fixed");
});

$("#myInput").on("blur", function () {
    $("body").css("position", "static");
});
1
Scott Semyan

修正済み-検索テキストボックスが入力されたときに、ヘッダーを相対修正位置にプッシュバックするためにハックしました。これは、ページがスクロール可能な場合にテキストフィールドの固定位置を壊すため、iOS仮想キーボード実装のバグです。オーバーフローが隠されている/ページがスクロールできない場合、仮想キーボードが実行されたときに固定位置を壊しません。

乾杯。

0
coldblooded01