今天遇到了 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 渲染机制, 经过测试发现可以啦...
在此, 分享下这个坑, 希望给小朋友提供帮助, 如果有帮助到你请不吝红心啊
来源: http://www.jianshu.com/p/42a83fde03cd