2013-12-13 18 views
2

我正在開發加載一個形式從其他網站到iframe中的應用程序。顯示時,iFrame的寬度和高度都設置爲100%。該網站有JQTouch。鍵盤隱藏在PhoneGap的iOS的輸入字段建立3.1的iFrame /對象和JQTouch

當我在iPhone上的iOS 7觸摸輸入字段,鍵盤彈出,並覆蓋輸入字段。它不滾動,調整大小,甚至讓我向下滾動查看輸入字段。如果我鍵入然後關閉鍵盤,則什麼都不會發生。

我試過了所有我遇到過的。在元視口標籤中添加/刪除高度=設備高度沒有任何作用。最接近解決方案的是在config.xml中添加首選項「KeyboardShrinksView = true」。這使得它滾動(但不夠),並永久推動網站約20px左右。

在過去的幾天裏,我一直在努力解決這個問題,目前還沒有解決方案。這是一個錯誤?這是JQTouch與PhoneGap Build交互的方式嗎?

更新:仍然沒有修復,但測試我把表單的頁面出來的iframe和使用window.location.href =「www.mywebsite.com」設置;他們的鍵盤在這種情況下工作。這對我來說還不是一個有效的解決方案,但是可能會提供它爲什麼不起作用的信息。

更新2:我重組該應用使用window.location.href,而不是iframe或HTML對象。這會產生一些小問題,但這些都比鍵盤不工作更好。如果有人有答案,我仍然希望看到它。

+0

我有同樣的問題。你有沒有找到一個解決辦法? – Red2678

+0

我想出了一些解決方法。我會將它們作爲答案發布。 –

回答

4

重大編輯:我剛剛意識到InAppBrowser插件不能單獨修復鍵盤錯誤。我做了更多的研究,並且this topic helped。我不得不爲每個元視口標籤添加「height = device-height」。 「width = device-width」應該修復在移動版Safari瀏覽器中查看網站時遇到的任何問題。最後的結果是這樣的:

<meta name="viewport" content="initial-scale=1, minimum-scale=1, 
    maximum-scale=1, user-scalable=0, height=device-height, width=device-width"/> 

其中的一個也有一個分號在那裏扔,所以一定要檢查,並仔細檢查語法錯誤,因爲它們可能導致的問題。

如果這行不通,還有另一種解決方案,您可以嘗試代替或除元視口修復。這是我鏈接的主題中的一些評論,涉及CSS的一些更改。對此的更改並未解決我代碼中的任何問題,但它至少幫助了一個人,因此值得檢查一下您是否仍需要解決方案。

我測試了此修復程序iframe和對象,並沒有奏效 - InAppBrowser仍然是必要的。

/重大編輯。

這裏有一些解決方法爲我工作:

  1. Use the InAppBrowser plugin。這允許應用程序在InAppBrowser中的加載頁面中與loadstart/loadstop/loaderror事件進行交互。這是我建議的解決方案。但是,在iOS 7中,您需要手動隱藏狀態欄,其解決方案爲here

  2. 或者使用window.location.href = [網址]加載頁面。如果您不需要擔心與應用程序進行交互或返回到應用程序或鏈接到外部網站(這兩者都是我需要的),那麼這就是要走的路。這很簡單,但缺乏第一個解決方案的一些功能。

  3. 或擺脫JQTouch。我無法做到這一點,但當您使用PhoneGap構建應用程序時,其中大部分內容都是多餘的。

+0

#win「height = device-height」爲我做了!我不是100%確定這將如何影響頁面渲染的所有方面,但是它解決了我期待的內容!非常感謝@ daniel-miller – Red2678

+0

@ Red2678 - 我實際遇到了在Safari中打開網站的問題,直到我添加了device = device-width。我現在將這個答案提供給任何需要它的人,但是在我添加之後,它看起來是固定的。 –