13

私は奇妙な問題に直面しています。私は現在、iOS6専用のHTML5とCSS3を使用してモバイルWebアプリを作成しています。

ただし、input要素がフォーカスを受け取り、ソフトキーボードが表示されると、ウィンドウがスクロールされ、入力がキーボードによって隠されないようになります（どのような場合でも入力が隠されないようにします）。

私はSOとGoogleを介して、この動作を防ぐために次を追加できることを読みました（UIWebView内でこれを表示する場合）。

input.onfocus = function () {
    window.scrollTo(0, 0);
    document.body.scrollTop = 0;
}

ただし、iOS 6では、ウィンドウは最初はにスクロールされていても0,0、フォーカスされた要素を中央に配置するためにもう一度スクロールされているようです。他の誰かがこれに出くわし、iOS 6の修正を知っていますか？

4

4 に答える 4

20

私もこの問題にぶつかりました。以下は iOS 6 で機能します。

<input onfocus="this.style.webkitTransform = 'translate3d(0px,-10000px,0)'; webkitRequestAnimationFrame(function() { this.style.webkitTransform = ''; }.bind(this))"/>

基本的に、Safari はテキストボックスの垂直位置に基づいてページをスクロールするかどうかを決定するため、要素を画面上部の上に一時的に移動し、フォーカス イベントが完了した後に再び元に戻すことで、Safari をだますことができます。

欠点は、要素がほんの一瞬消えることです。これを回避したい場合は、元の要素のクローンを元の場所に動的に挿入してから、webkitRequestAnimationFrameコールバックで削除することができます。

于 2013-01-12T19:47:14.370 に答える
1

タイミングの問題でしょうか？

ネイティブ イベントが発生した後に確実に起動するように、タイムアウトでラップしてみてください。

input.onfocus = function () {
    setTimeout(function() {
        window.scrollTo(0, 0);
        document.body.scrollTop = 0;
    }, 50)
}
于 2013-01-11T16:04:43.310 に答える
0

更新: 受け入れられたソリューションは UIWebView で動作しましたが、新しいより高速な WKWebView が登場しました。また、最新バージョンの Cordova for iOS を使用している場合は、iOS 9 デバイスで WKWebView を有効にできますが、デフォルトではビューは依然としてスクロール アップします。これを修正するには、Keyboard プラグインを追加するだけです (CSS ハッキングはもう必要ありません)。

ターミナル内に Cordova プラグインを追加します。

cordova platform add ios@4
cordova plugin add cordova-plugin-wkwebview-engine --save
cordova plugin add cordova-plugin-keyboard --save

Cordova の config.xml で WKWebView を使用するように iOS 設定を設定する

<platform name="ios">
    <feature name="CDVWKWebViewEngine">
        <param name="ios-package" value="CDVWKWebViewEngine" />
    </feature>
    <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
</platform>

次に、Cordova の config.xml に iOS キーボードの設定を挿入します。

    <preference name="KeyboardShrinksView" value="true" />
    <preference name="DisallowOverscroll" value="true" />

iOS 設定の詳細については、Cordova のドキュメント ( https://cordova.apache.org/docs/en/5.4.0/guide/platforms/ios/config.html ) に記載されています。

于 2016-01-06T15:25:42.573 に答える
-4

inputの font-size スタイルを1em以上に設定してください。

<input type=text style="font-size:1.2em">

于 2013-01-10T02:56:46.583 に答える