2010-12-20 18 views
13

モバイルSafariとAndroidのデフォルトブラウザを対象としたきれいで光沢のあるHTML5アプリケーションを構築しました。私がテストしているAndroidのバージョンは2.1と2.2です。Androidブラウザのテキストエリアがスクロールして使用できません

私のアプリはそのページの1つにテキストエリアを持っています。このテキストエリアは、時にはその中に多量のテキストを持っている傾向があります。基本的に自由形式の書き込みフィールドです。

これは、iOSで期待どおりに動作します。しかし、Androidの場合、入力するたびに画面がすべてのキーストロークで上下にスクロールし、入力中に何を入力しているのかわからないことがあります。さらに、テキストエリア内のコンテンツがその高さを超えると、その中でスクロールすることは不可能であるように見えます。

私はランドスケープモードでも起動しないでください。上記の問題はさらに顕著です。

これはAndroidのバグのような感じです。実際には私のテキストエリアについては何も気になりません。私は裸の必需品にそれを剥奪し、それは同じように動作します。

他の誰かがAndroidでのテキストエリアでこれほど楽しいことをしていて、アドバイスを提供していることがありますか、少なくとも共感できますか?

Googleは、AndroidのGmailウェブインターフェイスでこの問題を解決しているようです。マークアップとCSSが同じなので、JSマジックが起こっていると思います。

答えて

0

ほとんどすべてのページでこの現象が発生します。ここStackOverflowで、WordPressのブログや他の多くの。

私は、これはAndroidのブラウザでユーザビリティのバグ/問題であると私はネイティブUI /アプリケーションを好む理由であると:)

1

魔法の答えはありません唯一のイメージすることができます。 Androidキーボード入力のWebフォームとのやりとりは、単に恐ろしいものです。あなたは非常に注意深くそれが正常に動作するように針をスレッドする必要があり、キーボードの動作はAndroidのバージョンで同じではありません。しかし、多くの作業(今日のSencha Touchフレームワークを参照してください。他のモバイルWebフレームワークもまったく同じ問題に取り組んでいます)が可能です。

+0

私は奇妙なことに、スクロール、入力、カーソルの移動などの基本的なテキストエリア機能を使いたいと思っています。私の使用しているjQTouchライブラリのようなものかもしれません。 – Eschaton

9

解決策: Androidで3Dウェブキットが壊れています。これはこの問題の原因です。 -webkit-transformを使用していないことを確認してください:translate3d(0、0、0);または-webkit-backface-visibility:hidden;入力に関連するもの:(

+0

解決策は私のために働いていました。私のテキストエリアが突然動作を停止しましたb/c私はconateにtranslate3d(0,0,0)を追加しましたタイマーディビジョン。ありがとう! – istan

4

bodyのoverflowプロパティを 'hidden'に設定して、入力中に画面のスクロールをロックダウンすることができます。フォーカス/ブラーのイベントを有効/無効にすることができます。もちろんこれはあなたのユーザーが入力中にスクロールすることができないことを意味します

+0

提案していただきありがとうございます!私の場合、入力フィールドは、下にあるページをカバーしていた固定divです。フィールドが(タップから)フォーカスを得たときはいつも、Androidのソフトキーボードが繰り返し登場して消えていくにつれて、覆われたページが激しくスクロールした。オーバーフローを設定する:オーバーレイを表示するときに体に隠れていると、狂った動作を妨げるようです。私は、ページのスクロール位置をあらかじめ保存しておいてから、それを復元してください。 –

関連する問題