Android瀏覽器textarea滾動到所有地方，無法使用

因此，我構建了一個漂亮，閃亮的HTML5應用程序，針對移動Safari和Android的默認瀏覽器。我測試的Android版本是2.1和2.2。Android瀏覽器textarea滾動到所有地方，無法使用

我的應用程序在它的一個頁面上有一個textarea，這個textarea有時會有很多文本。它基本上是一個自由形式的寫作領域。

這可以在iOS中按預期工作。但是，在Android上，鍵入內容時，屏幕會在每次擊鍵時大幅上下滾動，但通常在打字時無法看到您正在鍵入的內容，並且在所有跳轉時都會暈眩。此外，如果textarea內的內容超過其高度，則無法在其中滾動。

甚至不讓我開始橫向模式。上述問題在那裏更加突出。

這感覺就像一個Android的錯誤，因爲我的textarea真的沒有什麼奇特的。我已經將它精簡到基本的要素，並且它的行爲相同。

想知道是否有其他人對他們的textareas在Android上有很多樂趣，也許可以提供一些建議，或者至少感同身受？

似乎Google已經設法在Android的Gmail網絡界面中解決這個問題。我猜這裏有一些JS魔法，因爲我的標記/ CSS是相同的。

來源

2010-12-20 Eschaton

幾乎在每個頁面上都會遇到這種情況。這裏在StackOverflow上，在WordPress的博客和更多。

我只能圖像，這是在Android瀏覽器中的可用性錯誤/問題，這就是爲什麼我喜歡原生UI /應用:)

來源

2010-12-20 13:09:52 WarrenFaith

沒有神奇的答案。 Android鍵盤輸入與網頁表單的交互是非常可怕的。您必須非常小心地穿針以使其正常工作，並且鍵盤行爲在Android版本中不一樣。但是有很多工作是可能的（參見我們的Sencha Touch框架今天的可能性 - 其他移動web框架也在處理完全相同的問題）。

來源

2010-12-21 00:55:07

奇怪的是我想只有基本的textarea功能，比如滾動，鍵入和在光標周圍移動，我可以在Gmail上做這些事情或多或少，但在我自己的網頁上，不是，似乎有什麼特別的阻礙它，也許它是我使用的jQTouch庫。 – Eschaton 2010-12-21 16:29:59

解決方案： 3D webkit在Android中被破壞，這導致了這個問題。確保你沒有使用-webkit-transform：translate3d（0，0，0）;或-webkit-backface-visibility：hidden;與任何與投入有關的事物。 :(

來源

2011-04-20 18:34:50

解決方案爲我工作了幾個小時後，我的頭撞在桌子上我的textarea突然停止工作B/C我已經添加了translate3d（0,0,0）到我的騙局茶壺謝謝！ – istan 2011-07-03 01:28:16

如果可能的話，您可以在用戶通過將body的overflow屬性設置爲'hidden'來鎖定屏幕滾動時 - 您可以在focus/blur事件中選擇性地啓用/禁用它。當然，這並不意味着你的用戶在輸入時將無法滾動

來源

2011-04-25 18:24:26 Mike

感謝您的建議！在我的情況下，輸入字段的位置是：固定div，覆蓋底層頁面。每當該領域獲得焦點（從水龍頭），覆蓋的頁面隨着Android軟鍵盤反覆出現並消失而瘋狂地滾動。設置溢出：在顯示覆蓋圖時隱藏在身體上似乎可以防止瘋狂的行爲。我只需要預先保存頁面滾動位置並在之後恢復。 – 2012-05-10 18:27:54

Android瀏覽器textarea滾動到所有地方，無法使用

回答

相關問題