3

うん。奇妙に聞こえます。

PhoneGap 2.1.0アプリをiOS6（iPhone5）で実行していますが、残念ながら別のデバイスでテストできません（家に帰ったらシミュレーターをチェックします）。

ユースケース： ユーザーは、INPUT要素の表示幅を超える範囲のINPUT要素にテキストデータを入力します。入力エラーを修正するには、バックスペースを使用する必要があります。

予想： 最後の文字が削除されます。

実際： 最後の文字が削除され、削除されたテキストがINPUT要素の表示範囲を超えている場合にのみ、「position：fixed;」が削除されます。アプリケーションヘッダーは、テキスト入力カーソルの位置に再配置されます。

画面は次のとおりです:(申し訳ありませんが、スタックではまだimgを投稿できません） スクリーンショットを発行します

誰かアイデアはありますか？これをレンダリングするHTMLやCSSの特定の部分が必要な場合は、お知らせください。できるだけ早く投稿します。

注意する価値があります：

  • 入力要素のスキンが変更されました。
  • 「-webkit-appearance」プロパティは、入力要素に対して「none」に設定されています。
  • この問題は、フォーム/画面/ページが異なるものも含め、すべての入力要素（type = text、search、number、phone、またはemail）で一貫しています。このプロパティはそれと関係があると思いますが、何を想像することはできません。私は過去にこのプロパティを問題なく使用しました。
  • バックスペースイベントは、入力要素で削除される文字が要素の表示範囲を超えて存在しない限り、期待どおりに機能します。
  • サイトには他の固定位置のDIV要素もありますが、再配置されているのはto​​pnavbar/headerだけです。

アイデア？

4

3 に答える 3

4

この回避策は私にとってはうまくいきます。

影響を受ける入力にこれらを追加します。

-webkit-transform: translate3d(0,0,0);
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-transform-style: flat;
于 2012-12-27T03:51:52.830 に答える
3

バックスペースが押されるたびにヘッダーを非表示にして、すぐにもう一度表示することで、Jqueryを使用してこれを回避できます。

$('#input_field').keyup(function(e) {
  if (e.keyCode === 8) {
    return $('#header').hide(0, function() {
      return $(this).show();
    });
  }
});
于 2012-11-26T15:03:51.697 に答える
1

私のチームは、IOS6のバックスペース+固定ヘッダーの移動に関して同様の問題を抱えていました。実際の解決策は見つかりませんでしたが、回避策として、modernizrを使用してオーバーフローコンテンツのスクロールをテストし、app-page divにスクロールを適用しながら、ヘッダーに絶対位置を適用しました。

    Modernizr.addTest('overflowscrolling', function(){
            return Modernizr.testAllProps("overflowScrolling");
    });

css

.overflowscrolling .app-header {
   position: absolute;  
}

.overflowscrolling #app-page {
overflow: scroll;
position:absolute;
top:0px; 
bottom: 0px;
left: 0px;
right: 0px;
-webkit-overflow-scrolling: touch;

}

于 2012-11-01T15:55:55.690 に答える