h5移动端与ios，Android兼容性问题（持续更新，欢迎评论补充）

监听输入法的键盘弹起、收起，输入法弹出导致页面底部按钮上浮 CSDN博客 focusin和focusout支持冒泡，对应focus和blur,使用focusin和focusout的原因是focusin和focusout可以冒泡，focus和blur不会冒泡，这样就可以使用事件代理，处理多个输入框存在的情况。

document.body.addEventListener('focusin', () => {
    //软键盘弹出的事件处理
    if(isIphone()){
        setTimeOut(() => {
            // what you do
        }, 300) // 因为键盘弹出有延时，这里做处理
    }
})
document.body.addEventListener('focusout', () => {
    //软键盘收起的事件处理
    if(isIphone()){
        document.activeElement.scrollIntoView(true);
    }
)}

ios z-index层级问题

当两个div不在一个层级时，假如有如下结构：

<div>
    <div class="parent">
        <div style="z-index: 1001;"></div>
    </div>
    <div class="other" style="z-index: 2;"></div>
</div>

这种情况下，class为parent的任何子节点，无论z-index设置的比other的z-index大还是小，都会被other覆盖。此时想让z-index生效，有两种方案

1. 目的div设置层级与other一致；

<div>
    <div class="parent">
    </div>
    <div style="z-index: 1001;"></div>
    <div class="other" style="z-index: 2;"></div>
</div>

2. 设置parent的z-index比other大或一样（一样的情况未尝试，建议实践验证）

<div>
    <div class="parent" style="z-index: 3;">
        <div style="z-index: 1001;"></div>
    </div>
    <div class="other" style="z-index: 2;"></div>
</div>