iPhone下H5页面键盘遮挡文本框或收回后但仍有透明遮挡图层

今天H5APP开发测试结束，出现一个BUG:

当文本框录入结束的时候，不手动关闭键盘，而是点击屏幕其他地方使键盘自动收回。这时候键盘收回后，仍有透明蒙层留在原处，导致原本位于键盘下放的元素无法获取热域，即不可操作。测试搭档发现屏幕发生滚动后，原本被覆盖的项可操作。于是就使用scrollIntoView使元素滚动。

目前解决方法如下：

当文本框获得焦点时，可使用下面方法防止键盘盖住文本框

handleFocus(event) {
    let e = event.currentTarget;
    setTimeout(() => {
        e.scrollIntoView({     // 带过渡的滚动到顶部
            block: 'start',
            behavior: 'smooth'
        });
    }, 300);
}               
                 
onFocus={this.handleFocus.bind(this)}   // 文本框获得焦点时调用

当文本框获得焦点时，键盘回收，但曾被键盘覆盖的元素无法操作，可使用下面的方法

handleblur() {
let e: any = event.currentTarget;
setTimeout(() => {
e.scrollIntoView({
block: ‘center’,
behavior: ‘smooth’
});
}, 300);
window.scrollTo(0, 0);
}
onBlur={this.handleblur.bind(this)} // 文本框失去焦点时调用
这里是通过强行滚动的方法解决的，用户体验可能并不好。如有好方法，欢迎留言，感激不尽。

如有转载请注明来源（洋葱先生： http://www.dreamload.cn/blog/?p=1014&preview=true）