今天遇到了iOS的坑，测试说在ios上有一个弹框需要输入用户信息，当用户输完之后收起键盘之后发现点击不了按钮了。。。。
对没听错按钮点着没有反应了（蒙蔽。。。）
刚开始以为是因为兼容问题想到了常见的几个解决方法
1、将div换成a或者button
2、添加css样式cursor：pointer
3、事件委托
然而这几种方法都都没解决（纳尼。。。）
后来发现不是点击不了，是点击其他的地方可以生效，猜想是不是ios下页面dom记录为键盘隐藏前的位置（这有点sao啊，确实太坑了）
怎么解决呢，想着以为是fixed定位引起的，因为之前遇到fixed弹框键盘位置问题，改为absolute后发现仍然会出现问题。
又新发现当隐藏键盘后弹框遮罩后面的页面会有错位，可以滑动将后面的页面滑下来，这次居然可以点击了。。。（有点神奇，估计是ios下dom渲染方式）
找到方法后怎么解决，先了解iOS下键盘弹起、隐藏的事件
document.body.addEventListener('focusin', ()=> { //软键盘弹起事件
console.log("键盘弹起")
})
document.body.addEventListener('focusout', ()=> { //软键盘隐藏事件
console.log("键盘隐藏")
})
我想是当键盘隐藏时手动处理页面的scrollTop，来触发ios的dom渲染机制，经过测试发现可以啦。。。
在此，分享下这个坑，希望给小朋友提供帮助，如果有帮助到你请不吝红心啊
网友评论