21

モバイル Web/開発は初めてです。私のアプリは、jquery-mobile、phonegap、および Compass (scss) を使用しています。

ログインページに問題があります:

ロゴとフィールドは、標準の 'div' コンテナー (data-role="content" data-type="vertical") に含まれています。背景が着色されています。

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

これが何が起こるかです：

バグの説明

スクロール イベントをブロックしようとしたり、ページを強制的に 0,0 にスクロールさせたりするなど、いくつかのトリックを試しましたが、成功しませんでした。

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

これは実行可能に思えますが、これが Skype iOS アプリ チームによって使用される種類の回避策であるかどうか疑問に思っています...

この特定のケースで使用されるテクニックに関するアドバイスは大歓迎です!

乾杯、

フレッド

4

5 に答える 5

5

これはまだテストしていませんが、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();
  }
});
于 2012-10-06T17:07:41.923 に答える
2

最終的に、問題を処理するためのコーディング ソリューションを見つけることができませんでしたが、フィールドを切り替えるときに、奇抜な配置により画面がフリーズする可能性があることに気付きました。

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

キーボードの「フィールドナビゲーションバー」を削除することで、余分な垂直スペースを確保できるはずですが、その方法もわかりません:/

ここに画像の説明を入力

于 2012-10-27T15:59:42.180 に答える
0

preventScrollfocus()のオプションがあります:
el.focus({preventScroll: true});

また、フォーカス オプションをサポートしていないブラウザ ( IE11、Safari<14 ?) をサポートする必要がある場合は、次のpolyfillを使用します。

!function(){

    let supported = false;
    document.createElement('i').focus({
        get preventScroll() {
            supported = true;
        },
    });
    if (!supported) {
        let original = HTMLElement.prototype.focus;
        Element.prototype.focus = HTMLElement.prototype.focus = function(options){
            if (options.preventScroll) {
                const map = new Map();
                let p = this;
                while (p = p.parentNode) map.set(p, [p.scrollLeft, p.scrollTop]);
                original.apply(this, arguments);
                map.forEach(function(pos, el){
                    // todo: test: only if changed? does it trigger scroll?
                    // IE flickers
                    el.scrollLeft = pos[0]
                    el.scrollTop  = pos[1]
                });
            } else {
                original.apply(this, arguments);
            }
        }
    }

}();
于 2021-07-13T09:20:22.277 に答える