ios 键盘弹出后马上收回_ios12键盘唤起后，收回键盘弹窗错位解决方案

问题

最近React的一个H5移动端项目遇到个问题，在iOS12中发现：点开弹窗后，点击弹窗里的input输入框，唤起键盘后，弹窗被键盘顶到页面顶部。但是在收起键盘后，弹窗表面上看是回到原位了，但是却无法聚焦到input输入框了，也无法关闭了。经过观察发现弹窗虽然是回到原位了，但实际弹窗的位置还在顶部，弹窗位置错位导致页面元素也因此失效。

解决方案

判断引发原因是页面的滚动高度并未重置，那么解决思路是：

1.首先监听聚焦，增加一个判断参数，然后在input失焦的时候判断是否为全部input失焦(其他的input输入框同时被聚焦时不是全部失焦)

2.在全部失焦时，重置页面滚动高度，从而达到键盘收起后页面回到原来位置的操作。

示例代码

const isFocus = false;

//失焦时绑定的事件

const handleBlur = () => {

//判断iOS版本

const ios_version = (navigator as any).userAgent.match(/os\s+(\d+)/i)[1] - 0;

if (ios_version > 11) {

this.isFocus = false;

setTimeout(

() => {

if (!this.isFocus) {

//重置页面滚动高度，使键盘收起后页面回到原位置

window.scrollTo(0, 20);

}

},

200,

);

}

}

//聚焦时绑定的事件

const handleFocus = () => {

this.isFocus = true;

}