移动端弹出软键盘导致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());}

 

相关文章