移动端弹出软键盘导致input光标和点击事件错位问题

Posted 2022-03-05 xi-li

我遇到的问题：在微信浏览器里，点击蒙层的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());