測試移動端頁面的時候屿岂，偶然發(fā)現(xiàn)點擊底部input輸入框時践宴，彈出的虛擬鍵盤偶爾會擋住input輸入框。
輸入框固定在頁面底部爷怀，如圖所示：
點擊底部input輸入框喚起軟鍵盤時阻肩，軟鍵盤擋住輸入框。如圖所示：
測試過多臺真機發(fā)現(xiàn)安卓的手機都不會出現(xiàn)這個問題运授，個別的iOS手機有問題烤惊。而且同一型號的蘋果有的有問題有的沒有問題。經(jīng)過多方的歸納吁朦、總結(jié)驚奇的發(fā)現(xiàn)：會出現(xiàn)這個bug的蘋果手機柒室，使用的都是蘋果第三方輸入法，而使用蘋果自帶的輸入法則沒有這個bug喇完。
出現(xiàn)這個bug的時候輸入字符的時候伦泥，input輸入框又會滾動上去。沿著這個思路往下想锦溪，我想到input獲取焦點失敗不脯、滾動瀏覽器窗口或容器元素的問題。
解決這個問題的思路是刻诊，點擊input輸入框的時候防楷，讓其input滾動到當(dāng)前div的頂部。于是我想到了Element.scrollIntoView() 方法则涯。
DOM規(guī)范中并沒有規(guī)定各瀏覽器需要實現(xiàn)怎樣的滾動頁面區(qū)域复局，各瀏覽器實現(xiàn)了相應(yīng)的方法，可以使用不同的方式控制頁面區(qū)域的滾動粟判。這些方法作為HTMLElement類型的擴展存在亿昏，所以它能在所有元素上使用。
Element.scrollIntoView()語法：
<code>
element.scrollIntoView(); // Equivalent to element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean arguments
element.scrollIntoView(scrollIntoViewOptions); // Object argument
</code>
參數(shù)：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档礁，該元素的頂部將對齊的滾動的祖先的可見區(qū)域的頂部角钩。這是默認值。）
If false, the bottom of the element will be aligned to the bottom of the visible area of the scrollable ancestor.（如果alignToTop false， 該元素的底部將對齊的滾動的祖先的可見區(qū)域的底部递礼。）
</code>
點擊input底部輸入框惨险，軟鍵盤擋住輸入框的解決辦法是，點擊輸入框的時候給input綁定事件脊髓，使用 Element.scrollIntoView()方法使元素彈到祖元素可見區(qū)域的頂部辫愉。代碼如下：
<code>
$("input").on("click", function() {
var target = this;
setTimeOut(function() {
target.scrollIntoView(true);
}, 100);
})
</code>
