2011-03-18 74 views
12

我正在嘗試創建一個使用webview的Android應用程序,以允許用戶輸入他們的用戶名/密碼,但是在點擊輸入框時他們會翻倍(請參閱下圖)。我使用的iScroll jQuery插件允許用戶在鍵盤出現時向上滾動頁面並阻止輸入區域。這裏是佈局/ CSS:Android - Webview,輸入框加倍?

CSS:

#scroller{ 
    position:absolute; 
    overflow:hidden; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    z-index:0; 

} 
#scroll_content { 
    margin-top: 70px;/*must match the topbar height*/ 
    padding-bottom:70px; 
} 

HTML:

... 
<div id="scroller"> 
    <div id="scroll_content"> 
    <!-- page content here --> 
    </div> 
</div> 
... 

我也注意到,無論我認爲在Android平臺上什麼樣的網頁,它覆蓋一個額外的輸入框通過我剛纔點擊的輸入。我猜,關鍵是在這種情況下禁用webview的默認設置?你怎麼做,或者你甚至可以?

感謝

Doubled Input

+0

任何這運氣? – ajh158 2011-03-30 00:09:44

+1

根本沒有。我放棄了原住民。抱歉。 – RyanM 2011-03-30 11:04:33

+0

有同樣的問題,該死的。 Addig這些translate3d CSS屬性對我沒有幫助。 :( – RynoRn 2012-11-30 15:01:21

回答

5

這可能是鏈接到CSS的轉換。手機似乎失去了文本字段的真實位置。基本上,它似乎是絕對定位和iscroll正在做的translate3d()之間的混淆。解決這個問題的簡單方法是在你的div上設置translate3d(0,0,0),以確保它知道它在哪裏。 看看我的文章瞭解更多詳情: http://java-cerise.blogspot.com/2011/10/dodgy-double-input-fields-on-android.html 希望有所幫助。

2

添加下列你的CSS:

#your-container-div-id{ 
    -webkit-transform: translate3d(0,0,0); 
}