ios软键盘在input聚集时遮挡住输入框的问题

问题描述：

ios下使用第三方输入法，造成input框聚焦时，input框不能正常贴在软键盘上，被软键盘遮挡。

本人布局 （此处代码无甚必要，只是本人认为此等布局结构甚好，故贴于此供各位大神一览）

<div class="main">
    <!-- 头部 -->
    <header></header>
    <!-- 内容区域 -->
    <section>
        <div class="content"></div>
    </section>
    <!-- 底部输入框 -->
    <footer>
       <!-- 在这可以写输入框、按钮什么的 -->
        <div class="input-box">
            <input>
        </div>
    </footer>
</div>

css 样式

// 代码只做演示，未写兼容代码
.main {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

header {
    // ...
}

.section {
    flex: 1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

footer {
    height: 40px;
    background: #fff;
    // ...
}

 

使用flexbox布局，并且设置100vh的高度是因为，软键盘弹起的时候，移动端浏览器窗口的高度变了 (变成原有窗口高度 - 软件盘高度），这样可以保证这个页面一直在窗口的可视范围。用户端的感受就是，输入框被软键盘给顶起来了。

 

解决问题：

通过观察，发现，软键盘把输入框覆盖了，是因为窗口发生了些许滚动，故input框稍微向下偏移了。

我的解决方案是，在input框聚焦的时候，设置100ms的延迟，然后再将页面滚动到最底部。这样亲测，完美解决问题。

setTimeout(() => {
    document.body.scrollTop = document.body.offsetHeight
}, 100)

拓展：

这篇文章也有借鉴意义，写的是fiexed定位下的input聚焦软键盘问题，及一些兼容处理

http://www.cnblogs.com/lxl900402/p/5564212.html