移动端微信打开网页, 键盘弹起后页面上滑,即使输入完成,页面不会自动恢复(页面仍然是上滑状态),导致弹框里的按钮响应区域错位,从而弹窗的按钮事件失效
-
问题出现的原因:
个别手机系统的问题,例如微信IOS 6.7.4版本 搭配 苹果IOS12版本就会有这种问题。 -
解决方法:
在input唤醒键盘输入后,在input上加入onBlur事件,input失去焦点后,让页面滚动到顶部(document.body.scrollTop = 0 )
<input type="text" onBlur="blur" />
<script>
function blur(){
//页面滚动回顶部
document.body.scrollTop = 0
//滚动到顶部 (或者使用 window.scrollTo(0,0) )
//滚动到底部( window.scrollTo(0, document.documentElement.clientHeight) )
}
</script>