測(cè)試移動(dòng)端頁面的時(shí)候，偶然發(fā)現(xiàn)點(diǎn)擊底部input輸入框時(shí)，彈出的虛擬鍵盤偶爾會(huì)擋住input輸入框。
輸入框固定在頁面底部，如圖所示：
點(diǎn)擊底部input輸入框喚起軟鍵盤時(shí)，軟鍵盤擋住輸入框。如圖所示：
測(cè)試過多臺(tái)真機(jī)發(fā)現(xiàn)安卓的手機(jī)都不會(huì)出現(xiàn)這個(gè)問題，個(gè)別的iOS手機(jī)有問題。而且同一型號(hào)的蘋果有的有問題有的沒有問題。經(jīng)過多方的歸納、總結(jié)驚奇的發(fā)現(xiàn)：會(huì)出現(xiàn)這個(gè)bug的蘋果手機(jī)，使用的都是蘋果第三方輸入法，而使用蘋果自帶的輸入法則沒有這個(gè)bug。
出現(xiàn)這個(gè)bug的時(shí)候輸入字符的時(shí)候，input輸入框又會(huì)滾動(dòng)上去。沿著這個(gè)思路往下想，我想到input獲取焦點(diǎn)失敗、滾動(dòng)瀏覽器窗口或容器元素的問題。
解決這個(gè)問題的思路是，點(diǎn)擊input輸入框的時(shí)候，讓其input滾動(dòng)到當(dāng)前div的頂部。于是我想到了Element.scrollIntoView() 方法。
DOM規(guī)范中并沒有規(guī)定各瀏覽器需要實(shí)現(xiàn)怎樣的滾動(dòng)頁面區(qū)域，各瀏覽器實(shí)現(xiàn)了相應(yīng)的方法，可以使用不同的方式控制頁面區(qū)域的滾動(dòng)。這些方法作為HTMLElement類型的擴(kuò)展存在，所以它能在所有元素上使用。
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，該元素的頂部將對(duì)齊的滾動(dòng)的祖先的可見區(qū)域的頂部。這是默認(rèn)值。）
If false, the bottom of the element will be aligned to the bottom of the visible area of the scrollable ancestor.（如果alignToTop false， 該元素的底部將對(duì)齊的滾動(dòng)的祖先的可見區(qū)域的底部。）
</code>
點(diǎn)擊input底部輸入框，軟鍵盤擋住輸入框的解決辦法是，點(diǎn)擊輸入框的時(shí)候給input綁定事件，使用 Element.scrollIntoView()方法使元素彈到祖元素可見區(qū)域的頂部。代碼如下：
<code>
$("input").on("click", function() {
var target = this;
setTimeOut(function() {
target.scrollIntoView(true);
}, 100);
})
</code>
