我知道已經有關於手機的虛擬鍵盤隱藏或重疊的輸入字段，文本區域等問題的一些StackOverflow的線程。但所有這些線程都沒用，我搜索了很多，但很多都是基於Android開發和基於Web開發的一些問題討論這個問題。虛擬鍵盤隱藏字段/文本域/ CONTENTEDITABLE（下面隱藏鍵盤）

我專注於web開發。問題是，問題解決或沒有任何真正有用的答案已發佈/發佈。

所以我開始這個希望它現在就解決了。那麼現在直接出現什麼問題呢？

如果您在移動設備上點擊某個可以輸入內容的區域，通常會希望網站向上滾動並且虛擬鍵盤在可編輯區域之後打開，但是發生的情況並非如此。虛擬鍵盤正如覆蓋層一樣打開 - 它開始重疊可編輯區域。

在我的情況下，我打開一個jQuery UI對話框，其中我的字段位於，但我認爲那應該不重要。

所以我讓我的思想穿越，並來到解決方案，以添加一些額外的空間。像這樣的：JSFiddle。

所以我可以向下滾動。但是這很煩人，因爲它沒用或者沒有使用打開虛擬鍵盤的設備的人不需要的其他詞語。於是我想到了這樣的功能：

function isMobileDevice() { 
    var isiPhone = navigator.userAgent.toLowerCase().indexOf("iphone"); 
    var isiPad = navigator.userAgent.toLowerCase().indexOf("ipad"); 
    var isiPod = navigator.userAgent.toLowerCase().indexOf("ipod"); 
    var isAndroid = navigator.userAgent.toLowerCase().indexOf("android"); 
    if (isiPhone > -1 || isiPad > -1 || isiPod > -1 || isAndroid > -1) { 
     return true 
    } else { 
     return false; 
    } 
}

那麼，對於這部分將是我的問題，我也不曾忘記的設備，這也打開了一個虛擬鍵盤和主要的問題是還有什麼，除了我的解決辦法？我沒有找到明確識別虛擬鍵盤的東西。

編輯2015年4月24日：

傢伙，我只是一個三星Galaxy Note和火狐，Chrome以及歌劇的最新的移動瀏覽器版本進行了測試。（！更新了所有三個，今天）

好這裏是我的結果： enter image description here

你可以看到所有的瀏覽器，火狐之外，失敗，這是我的問題的完美的視覺例子。虛擬鍵盤與可編輯區域重疊！通常，我比其他任何瀏覽器都更喜歡Chrome，但對於這種情況，我必須說 - 非常棒的Firefox！

來源

2015-04-23 user3714751

你對所討論的元素使用'position：fixed'或'position：absolute'嗎？ – Siguza

我不明確地改變位置，所以如果我使用引導它是位置：相對。 – user3714751

如果您發現任何解決方案，請讓我們知道。 –

...從已經公佈的照片看起來，你必須使用一個飛越滾動的元素與height:100%持有的內容。我對嗎？

如果是這樣，這就是爲什麼虛擬鍵盤重疊內容：虛擬鍵盤傾向於推動主體內容爲重點的輸入和不溢出的元素。在這種情況下，正文內容不會移動，因此虛擬鍵盤只是與您的內容重疊。我不知道Mozilla的開發人員是否在這個特定問題上花費了更多時間，但看起來像他們。

編輯：我回答了這個問題，而不先閱讀註釋，看起來像我已經評論，但看起來像我的意見被忽略 - 我不知道爲什麼，可能是因爲我點上。：/

來源

2017-07-06 01:09:28 scooterlord

虛擬鍵盤隱藏字段/文本域/ CONTENTEDITABLE（下面隱藏鍵盤）

編輯2015年4月24日：

回答

相關問題