Android HTML5 - 入力フィールドがソフトキーボードオーバーラップ

Question

Androidのソフトキーボードで入力フィールドをオーバーラップさせるソリューションを探していて少し疲れました。私の問題はこれと非常に似ています。Soft Keyboard Overlapping with EditText Fieldですが、この場合HTML5ではネイティブアプリケーションではありません。

もっと正確には、入力フィールドがキーボードで完全に覆われていると、ページ全体がスクロールして表示されます。これは問題ありません。しかし、この入力が可視領域の端にある場合（キーボードが表示された後）、私のソフトキーボードが重なってしまい、ページがまったくスクロールしません。最初の記号を入力した直後にページがスクロールされます。

私の顧客は、それはギャラクシータブ10" に確実に起こる...この動作を好きではない - のAndroid 4.0.3、レノボのタブレット - Androidの3.1

私はbox-sizing:border-box;を使用して、入力の高さを設定しようとしています。 -webkit-appearance: textfield;、-webkit-user-select: text;、-webkit-writing-mode: horizontal-tb;、-webkit-rtl-ordering: logical;とさらにいくつかの、しかし、何も働いた。

はあなたがどんな考えを持っている？私はCSSのソリューションを好むだろう、JavaScriptのページのスクロールは、この場合、私のための答え（顧客の要求）ではありません。

多分それはjuですいくつかの入力の親のスタイルのために回避策や特定の問題が発生していないAndroid Webブラウザのバグ（既にすべてのposition: absoluteのプロパティを削除しようとしました）

すべての提案を歓迎します。

Answer 1

このAndroidの厄介な問題を解決する最も簡単な方法は、入力フォーカスとブラーイベントを使用することです。フッタータグを使用していない場合は、フッタエレメントのクラスに置き換えてください。 jQueryので

：

$("input").focus(function(){ 
    $('footer').hide(); 
}); 

$("input").blur(function(){ 
    $('footer').show(); 
}); 

Answer 2

私は私のCSSのフレームワークに関連したこの厄介な問題は、持っていた - モバイル角度-UIを。 それはインターネット上で知られているバグです。私はウェブで修正を探すのに何時間も費やしましたが、残念なことに提案された解決策のどれもが私の特定のケースを解決しませんでした。 最後にいくつかのテストを行いましたが、この動作は私が使用したフレームワークが原因であることが判明しました。 （私はmobile-angular-uiの作者に報告しましたが、回答は得られませんでした） この問題があなたのアプリのアーキテクチャに関連しているかどうかを調べるために、本当に。すべてのCSSコードをコメントアウトし、空白の純粋なHTMLページからフォームを開始してください。 あなたのCSSがコメントアウト/オフになっているときに、フォームが表示されている部分（ソフトキーボードの上に表示されるようにスクロールする必要があります）があれば、あなたの問題は私の場合のようにCSSにあります。自分のアプリでモバイル角度-UIを使用する人は 、そしてこの問題に入る、コードのこの作品は、私のために仕事をした：

html { 
    overflow: auto; 
} 
body { 
    height:auto; 
    overflow: auto; 
} 
.scrollable { 
    position:inherit; 
} 

残りはあなたの特定のケースによって異なります。

こちらがお役に立てば幸いです。