6

ドキュメントのタッチスタートで preventDefault() を使用して、ページのスクロールを防ぎます。残念ながら、これはあまりにも多くを防ぎます。ユーザーは、入力にフォーカスを与えることができなくなりました (そして、ソフト キーボードを開くことができなくなりました)。jQuery focus() を使用して、タッチスタートの入力にフォーカスを与えることができます。これにより、iOS では (ほとんどの場合) ソフト キーボードが開きますが、Android では開きません。

背景:

できるだけモバイル アプリのようにしたい Web ページがあります。私が本当に関心があるのは Android と iOS だけですが、フォーム ファクタは問いません。まず、ページ内のコンテンツを画面サイズとまったく同じサイズにすることから始めます。これは、ユーザーがページに指を置くまでは問題ありません。ユーザーのスクロールを防ぐ必要があります。次のコードはこれを実現しますが、2 つのオペレーティング システムでわずかに異なる方法で実行されます。

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

iOS では、これによりエラスティック スクロールが妨げられます。つまり、ユーザーがページからスクロールしようとすると、Web ページの背後にあるテクスチャが表示される可能性があります。この機能は通常の Web ページには適していますが、私の場合は UX が損なわれます。

Android では、アドレス バーを非表示にするために使用する便利なハックの暴露を防ぎます。Android ブラウザーはアドレス バーが表示された状態で起動しますが、ユーザーがページを下にスクロールすると、アドレス バーは表示されなくなります。プログラムでブラウザのアドレス バーを強制的に非表示にするには、ロード時に呼び出される関数に次のコード行を追加するだけです。

$('html, body').scrollTop(1);

これは、スクロールしたことを Android ブラウザに伝えるハックな (しかし唯一の) 方法であり、アドレス バーはもう必要ありません。

ドキュメントに preventDefault がない場合、Android ブラウザーはスクロールを許可し、アドレス バーが表示される可能性があります。

したがって、両方の OS には、ドキュメントのタッチスタートごとにこの preventDefault() を呼び出す正当な理由がありますが、あまりにも多くのことを防ぎます。入力フィールドをタップしても何も起こりません。jQuery focus() の呼び出しを使用すると役立つ場合がありますが、Android ではなく iOS でのみソフト キーボードが開きます。

$('input').on('touchstart', function() {
    $(this).focus();
});

ページがスクロールしないようにする方法

注: このコード

$(document).on('touchstart', function(e) {
    if (e.target.nodeName !== 'INPUT') {
        e.preventDefault();
    }
});

最初のタッチが入力フィールド内から発生している限り、ユーザーはページをスクロールできるため、欠陥があります。

4

3 に答える 3

10

私は実際に別のプロジェクトでこの問題を解決しましたが、それを忘れて、これを入力することでほとんど覚えていました。

彼らの鍵は、タッチムーブでそれを行うことです。

$(document).on('touchmove', function(e) {
    e.preventDefault();
});

ただし、touchstart の preventDefault は、ジェスチャ対応のスライドショーで画像保存メニューを禁止するなど、あらゆる種類の優れた機能を実行します。私のプロジェクトにもこれが含まれています。

$(document).on('touchstart', function(e) {
    if (e.target.nodeName !== 'INPUT') {
        e.preventDefault();
    }
});

追加のコンテンツや、より多くの視聴者にリーチできるようにこれを再フォーマットする方法について提案があれば、それは素晴らしいことです. ここにあるコンテンツをすべて 1 か所で見たことがないので、SO にある必要があると感じました。

于 2012-09-18T21:09:10.040 に答える
0

あなたの質問に対する簡単な答えは、「preventDefault」を使用しないで、代わりにポインター イベント css プロパティを使用して、スクロールする要素のスクロールを無効にすることです。

入力用の CSS:

input {
    pointer-events: auto !important;
}

touchstart イベントリスナー:

document.body.addEventListener('touchstart', function(e) {
    if (e.target.nodeName === 'INPUT') {
        this.style.pointerEvents = 'none';
    }
});

入力をぼかすときは、ポインター イベントをリセットする必要があります。

document.body.pointerEvents = 'auto';

+1 良い質問

于 2014-10-01T10:21:22.173 に答える