點選底部input輸入框，彈出的軟鍵盤擋住input（蘋果手機使用第三

測試移動端頁面的時候，偶然發現點選底部input輸入框時，彈出的虛擬鍵盤偶爾會擋住input輸入框。

輸入框固定在頁面底部，如圖所示：

 

input固定底部設計圖.png

點選底部input輸入框喚起軟鍵盤時，軟鍵盤擋住輸入框。如圖所示：

 

點選input鍵盤擋住圖.png

測試過多臺真機發現安卓的手機都不會出現這個問題，個別的iOS手機有問題。而且同一型號的蘋果有的有問題有的沒有問題。經過多方的歸納、總結驚奇的發現：會出現這個bug的蘋果手機，使用的都是蘋果第三方輸入法，而使用蘋果自帶的輸入法則沒有這個bug。

出現這個bug的時候輸入字元的時候，input輸入框又會滾動上去。沿著這個思路往下想，我想到input獲取焦點失敗、滾動瀏覽器視窗或容器元素的問題。

解決這個問題的思路是，點選input輸入框的時候，讓其input滾動到當前div的頂部。於是我想到了Element.scrollIntoView() 方法。

DOM規範中並沒有規定各瀏覽器需要實現怎樣的滾動頁面區域，各瀏覽器實現了相應的方法，可以使用不同的方式控制頁面區域的滾動。這些方法作為HTMLElement型別的擴充套件存在，所以它能在所有元素上使用。

Element.scrollIntoView()語法：
<code>
element.scrollIntoView(); // Equivalent to element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean arguments
element.scrollIntoView(scrollIntoViewOptions); // Object argument
</code>

引數：alignToTop（可選）
<code>
Is a Boolean value:
If true, the top of the element will be aligned to the top of the visible area of the scrollable ancestor. This is the default value.（ 如果alignToTop為true，該元素的頂部將對齊的滾動的祖先的可見區域的頂部。這是預設值。）
If false, the bottom of the element will be aligned to the bottom of the visible area of the scrollable ancestor.（如果alignToTop false， 該元素的底部將對齊的滾動的祖先的可見區域的底部。）
</code>

點選input底部輸入框，軟鍵盤擋住輸入框的解決辦法是，點選輸入框的時候給input繫結事件，使用 Element.scrollIntoView()方法使元素彈到祖元素可見區域的頂部。程式碼如下：
<code>
$("input").on("click", function() {
var target = this;
setTimeOut(function() {
target.scrollIntoView(true);
}, 100);
})
</code>

作者：小宇子李

原文連結：https://www.cnblogs.com/liyanyu520/p/9450102.html