web-dev-qa-db-ja.com

Android Chromeのキーボードの後ろに隠された入力テキストボックス

次の形式のモバイルWebページがあります。

ヘッダー-ロゴなど-絶対配置

コンテンツ-スクロール可能、絶対配置

フッター、40px絶対配置

コンテンツ領域には複数の入力ボックスがあります。 On Chrome Androidでは、ページの下部にある入力ボックスをタップすると、ソフトキーボードがポップアップしたときに入力が表示されなくなります。ページはスクロールしてボックスを移動しようとします表示されますが、実際に表示するには十分ではありません。フッターの後ろに隠れてしまいます。

これを修正する方法はありますか？これはChrome-Androidでのみ発生します。 iOSのSafariおよびIEは正常に機能します。

androidhtmlgoogle-chromemobile
24
Aniket

私はCSSのみのソリューションを望んでいましたが、それはないと思います。 Gaunt Faceの答えはそれを行う良い方法です。残念ながら、私の場合、これにはいくつかの変更が必要であり、自動化を妨げる可能性があります（URLに#targetsが追加されているため）。

これを解決するには、2つのクリックハンドラーで位置タイプを変更しました。

Input/textareaフィールドのクリックハンドラーがあります。そのクリックハンドラーで、フォームコンテナーdivの位置スタイルを静的に変更します。オブジェクトフィールドにスクロールバーがある場合、これによりフッターが下にプッシュされます。これは、私の場合、キーボードがポップアップしたときにいくつかのフィールドしか表示されないため、問題ではありません。ユーザーは、目に見える違いを見ることができません。

ユーザーが入力フィールドの外をクリックしたときの2番目のハンドラー-ページクリックハンドラー-位置タイプを絶対に復元し、以前と同じようにページを表示します。

これには、意図しない結果が1つあります。スクロール位置が失われます。入力フィールドのオフセットを取得し、そのオフセットを使用して親divでscrollTopを呼び出し、位置を復元することでこれを修正しました。

これに関するいくつかの質問を見ましたが、答えが見つかりませんでした。これが誰かの助けになることを願っています。

8
Aniket

これを解決する方法はいくつかありますが、最も明らかな解決策は、javascriptを使用してURLにハッシュを設定することです。

その例はここにあります： http://jsbin.com/emumeb/24/quiet コード： http://jsbin.com/emumeb/24/edit =

少し複雑な例では、ヘッダーとフッターが固定されている場合、ハッシュを設定するときにターゲットを使用してページの外観を変更することができます。

レイアウトに応じて、もう少しクリエイティブを取得する必要がある場合があります。フォーカスされた状態とフォーカスされていない状態のクラスをボディに設定し、それに応じてUIを変更できますが、モバイル、デスクトップなどで優れたエクスペリエンスを維持するのは難しくなります

例を示します http://jsbin.com/emumeb/30/quiet コード： http://jsbin.com/emumeb/30/edit

明らかにこれはchrome自身で処理する必要があります（iOSが持っているUXに似ています）ので、Chrome- https://code.google.com/p/chromium/issues/detail?id=270018&can=4&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified .

8
Matt Gaunt

私はあなたたちのように頭が良くありません、

だから私は定規を取り、私の携帯電話の画面のサイズを測定しました。 2番目キーボードのサイズを測定しました

キーボードが画面の38％を占めていることに気付きました。

そこで、フッターにdivを入れて、愛情を込めてカエルと呼びました。

そして、私はこのコードを使用しました：

 $('body').on('focus', 'input, textarea', function(event) {
        var altura = $(window).height();
        var scrollp = parseInt(parseInt(altura)/100*38);
        $("#divSapo").css("height",scrollp + "px");
        window.scrollTo(0,document.body.scrollHeight);
    });
5
Danilo Ribeiro

absoluteポジショニングからfixedポジショニングに変更すると、問題が解決するはずです。ページの読み込み中に、初期ページサイズに対して要素を絶対位置に配置します（キーボードを追加すると、表示されるページが縮小されます）。要素を現在のページサイズに対して固定し、要素をキーボードの上に保持します。

#myElement {
  position: fixed;
  bottom: 2em;
}
4
bornSwift

非常にうまく機能するCSSソリューションを見つけました。

高さ300ピクセル以下のウィンドウ画面に対してcssクエリを実行できます。これは、ソフトウェアキーボードが表示された電話機のほとんどの画面の高さです。非常に高速かつ非常にうまく機能します。例えば

@media screen and (max-height: 300px) {

    #myinputtext{
        position: absolute; 
        top: 50px;

    }
}
2
Alberto Perez

JQueryを使用する場合、次のようにコードを使用できます。

$('body').on('focusin', 'input, textarea', function(event) {
  if(navigator.userAgent.indexOf('Android') > -1 && ...){
   var scroll = $(this).offset();
   window.scrollTo(0, scroll);
 }
});

ただし、バグは今すぐ解決する必要があります。

0
chuhai

この問題を解決するためにscrollIntoViewを使用しました。

$(document).on('focus', selector, function() {
    document.querySelector(selector).scrollIntoView();
});
0
Pawan Kotak