防止頁面滾動焦點切換

Question

我是移動web/dev的新手。我的應用程序使用jquery-mobile，phonegap和Compass（s​​css）。

我有我的登錄頁面上的一個問題：

標誌和字段包含在標準的「格」集裝箱（數據角色=「內容」數據類型=「垂直」）。背景是彩色的。

當將焦點從登錄字段切換到密碼字段時，頁面向上滑動，這是我不希望發生的事情。我希望我的徽標和字段保持原樣，就像Skype iOS應用登錄頁面一樣。

會出現以下情況：

我已經嘗試了多種技巧，試圖阻止滾動事件，或迫使頁面滾動到0,0，但沒有成功。

我現在正在考慮一種新的策略，可能會使用頂部相對定位標識和字段，並捕捉焦點事件以自己滾動頁面，在鍵盤上滑動（通過動畫頂部相對定位座標）。

雖然這似乎是可行的，我想知道如果這是種各地使用Skype的iOS應用程序團隊工作...

任何意見，在這種特殊情況下使用的工藝是值得歡迎的！

歡呼聲，

弗雷德

Answer 1

我沒有測試過這還，但不e.preventDefault（）停止的問題？通常你使用e.preventDefault（）來停止默認的滾動/拖拽行爲。

$(document).bind('focus', function(e){ 
    e.preventDefault(); 
}); 

或更好

$(element).bind('focus', function(e){ 
    e.preventDefault(); 
}); 

或

$(document).bind('touchstart', function(e){ 
    e.preventDefault(); 
}); 

請問輸入字段更好地工作？

$(":input").live({ 
    focus: function(e) { 
    e.preventDefault(); 
    } 
}); 

Answer 2

我最後還是沒有找到任何編碼解決方案來處理我的問題成功，但是我注意到一個chirurgical定位不准我字段之間切換時，帶狀裝飾畫面。

一旦鍵盤可見，整個登錄屏幕的可用空間不得超過可用空間，即200像素。此外，爲了防止在切換場時滾動，最後輸入場中心位置不得超過100像素最大值。使用CSS可以使用填充和邊距來達到理想的效果。

應該可以通過移除鍵盤「字段導航欄」來獲得額外的垂直空間，但我不知道該怎麼做，無論是：/