測試移動端頁面的時候，偶然發(fā)現(xiàn)點(diǎn)擊底部input輸入框時，彈出的虛擬鍵盤偶爾會擋住input輸入框。

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

input固定底部設(shè)計圖.png

點(diǎn)擊底部input輸入框喚起軟鍵盤時，軟鍵盤擋住輸入框。如圖所示：

點(diǎn)擊input鍵盤擋住圖.png

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

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

解決這個問題的思路是，點(diǎn)擊input輸入框的時候，讓其input滾動到當(dāng)前div的頂部。于是我想到了Element.scrollIntoView() 方法。

DOM規(guī)范中并沒有規(guī)定各瀏覽器需要實(shí)現(xiàn)怎樣的滾動頁面區(qū)域，各瀏覽器實(shí)現(xiàn)了相應(yīng)的方法，可以使用不同的方式控制頁面區(qū)域的滾動。這些方法作為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，該元素的頂部將對齊的滾動的祖先的可見區(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， 該元素的底部將對齊的滾動的祖先的可見區(qū)域的底部。）
</code>

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

更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的点击底部input输入框，弹出的软键盘挡住input（苹果手机使用第三方输入法 ）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。