移動端彈出軟鍵盤導致input光標和點擊事件錯位問題

我遇到的問題：在微信瀏覽器里，點擊蒙層的input框，彈出軟鍵盤，蒙層被頂上去，同時input的焦點和button的點擊事件也被頂上去了，軟鍵盤消失，蒙層回到原位，但是點擊input和button均沒反應，點擊蒙層被頂上去的位置有反應，因為input的焦點和button的點擊事件沒回到原位。這個問題出現在ios中，android手機沒問題。

以下是一位大佬寫的解決方法，解決了我的問題。

原文地址：https://blog.csdn.net/Doubleu_/article/details/86596569

原因：移動端頁面的定位會影響光標位置。移動端在點擊input輸入的時候軟鍵盤彈出，整個頁面被鍵盤往上擠壓，然而光標的位置也被擠壓，收起軟鍵盤的時候頁面恢復，但是光標還是在原來input的位置，就導致光標不在該在的地方，整個頁面呈現無法點擊的狀態，用戶體驗極差。

解決方法：

方法一：在軟鍵盤收起(也就是失焦)的時候scrollTop回頂部，或者使用window.reload()。

$("input").blur(function(){
    setTimeout(function(){
    var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
    window.scrollTo(0, Math.max(scrollHeight - 1, 0));
    },100)
})

方法二：使用reload

$('textarea,input[type=text]').focus(function () {
   window.setTimeout('scrollBottom()', 500);
});
function scrollBottom() {
   window.scrollTo(0, $('body').height());
}