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

我遇到的問題:在微信瀏覽器裏,點擊蒙層的input框,彈出軟鍵盤,蒙層被頂上去,同時input的焦點和button的點擊事件也被頂上去了,軟鍵盤消失,蒙層回到原位,可是點擊input和button均沒反應,點擊蒙層被頂上去的位置有反應,由於input的焦點和button的點擊事件沒回到原位。這個問題出如今ios中,android手機沒問題。android

如下是一位大佬寫的解決方法,解決了個人問題。ios

原文地址:https://blog.csdn.net/Doubleu_/article/details/86596569瀏覽器

緣由:移動端頁面的定位會影響光標位置。移動端在點擊input輸入的時候軟鍵盤彈出,整個頁面被鍵盤往上擠壓,然而光標的位置也被擠壓,收起軟鍵盤的時候頁面恢復,可是光標仍是在原來input的位置,就致使光標不在該在的地方,整個頁面呈現沒法點擊的狀態,用戶體驗極差。微信

解決方法:spa

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

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

方法二:使用reloadcode

$('textarea,input[type=text]').focus(function () {
   window.setTimeout('scrollBottom()', 500);
});
function scrollBottom() {
   window.scrollTo(0, $('body').height());
}
相關文章
相關標籤/搜索