滾動網頁輸入字段頂部防止通過軟鍵盤隱藏

我有一個移動設備上使用的網頁，當點擊輸入字段時，Android軟鍵盤隱藏輸入字段，當我點擊輸入字段我希望字段向上滾動在鍵盤上方可見。滾動網頁輸入字段頂部防止通過軟鍵盤隱藏

我搜索了很多指向Android清單文件的各種文章，但這是一個不是應用程序的網頁。我也嘗試過各種javascript選項，包括下面的選項，但許多瀏覽器似乎不喜歡.focus事件。它適用於Chrome而不是其他許多。

jQuery(function ($) { 
     $("#Litres").focus(function() { 
      document.body.scrollTop = $(this).offset().top; 
     }); 
    });

有沒有人有一個簡單的解決方案來實現所需的網頁效果？

來源

2016-01-08 user552769

雖然此解決方案不會自動將您的字段滾動到視圖中，但我發現它解決了軟鍵盤處於活動狀態時頁面無法滾動的問題。

答案線程是在這裏：https://stackoverflow.com/a/25725611/5580153

我發現加入以下CSS在我的最大寬度：768px媒體查詢所做的本土手機瀏覽器響應於滾動而鍵盤活躍：

html { 
    overflow: auto; 
} 
body { 
    height:auto; 
    overflow: auto; 
} 
.scrollable { 
    position:inherit; 
}

我希望這可以幫助你，或像我這樣的人，正在努力尋找解決方案。

乾杯！

編輯：如果你正在運行類似flexbox佈局的東西，如果你強制高度自動調整，這也可以用jQuery來實現。以下腳本將查找包含Mobi的用戶代理（*，因此它將以iOS和Android設備爲目標，如果您願意，可以更具體地針對用戶代理），並添加所需的樣式。

if (/Mobi/i.test(navigator.userAgent)) { 
    $('html').css({"overflow":"auto"}); 
    $('body').css({"height":"auto"}); 
    $('body').css({"overflow":"auto"}); 
    $('.scrollable').css({"position":"inherit"}); 
}

很可能有更優雅的方式來實現它，我敢肯定有人可以填補我進去。

來源

2016-02-03 06:03:10

滾動網頁輸入字段頂部防止通過軟鍵盤隱藏

回答

相關問題