2012-10-06 16 views
6

モバイルWeb/devを初めて使用しています。私のアプリはjquery-mobile、phonegap、Compass(s​​css)を使っています。フォーカス切り替え時のページのスクロールを防止する

私は、ログインページで問題を抱えている:

ロゴとフィールドが標準で含まれている「div要素のコンテナ(データ-役割=「コンテンツ」データ型=「縦」)。背景は色付けされています。

ログインフィールドからパスワードフィールドにフォーカスを切り替えると、ページがスライドしてしまいます。これは発生したくないものです。 SkypeのiOS Appのログインページと同じように、私のロゴとフィールドをそのまま残しておきたいです。ここ

は何が起こるかです:

bug description

私は成功せず、スクロールイベントをブロックしようとしている、または0,0にスクロールするページを強制的に、いくつかのトリックを試してみました。

ロゴとフィールドの相対的な相対位置を使用し、ページをスクロールするフォーカスイベントをキャッチして、キーボードのスライド上で(上部の相対的な座標をアニメーション化することによって)新しい戦略について考えています。

これはなんとかようだけど、これは周りのSkypeのiOSアプリのチームによって使用される作業の種類であれば、私は...

を疑問に思って、この特定の場合に使用されるテクニクス上の任意のアドバイスは大歓迎です!

歓声、

フレッド

+0

iOSアプリは、WebViewを使用してPhonegapを動作させるのではなく、ログインフィールドにネイティブビューを使用しています。身長を100%に変更しようとするか、またはページが開いたときに上半分にログイン/パスワードを入力しようとしている可能性があります。 –

+0

@ GeekNum88確かに。 SoleshoeはWebViewを使用してこれに対する解決策を探しています。 – Zulakis

+0

@ Zulakis - 愚かな入力キー - 私は入力を終えていませんでした...一口 –

答えて

3

私はまだこれをテストしていませんが、e.preventDefault()は、問題を停止していますか?通常、e.preventDefault()を使用して、デフォルトのスクロール/ドラッグ動作を停止します。

$(document).bind('focus', function(e){ 
    e.preventDefault(); 
}); 

またはより良い

$(element).bind('focus', function(e){ 
    e.preventDefault(); 
}); 

または

$(document).bind('touchstart', function(e){ 
    e.preventDefault(); 
}); 

入力フィールドワークは、より良いでしょうか?

$(":input").live({ 
    focus: function(e) { 
    e.preventDefault(); 
    } 
}); 
+0

第1および第2の解決策は私の問題に関して何もしません。第3の解決策は、ユーザーがフォーカスを切り替えるのを防ぐ...第4の解決策は、ログインフィールド上で呼び出された.focus()上でキーボードがスライドするのを防ぎます(ただし、キーボードはフィールドに触れるとスライドし、問題は同じです) ... – soleshoe

+0

これはjqueryなしで行うことができますか? –

1

私はようやく私の問題を処理するために、任意のコードソリューションを見つけることに成功しなかったが、私はchirurgical位置決めがフィールド間を切り替えるとき、私は、画面をフリーズすることが許可されていることに気づきました。

ログイン画面全体で使用可能なスペースは、キーボードが表示されたら使用可能なスペース、つまり200ピクセルを超えてはいけません。さらに、フィールドを切り替えるときのスクロールを防止するために、最後の入力フィールドの中心位置は最大100ピクセルを超えてはいけません。 CSSを使用すると、パディングとマージンを再生して、望ましい結果を得ることができます。

キーボードの「フィールドのナビゲーションバー」を除去することにより、余分な縦方向のスペースを得ることが可能でなければなりませんが、私はどちらもそれを行う方法がわからない:私はスカイプかなり確信している/

enter image description here

+0

このソリューションをご覧ください:http://stackoverflow.com/a/39584526/1043231 – Dominik

関連する問題