完美修复ios原生键盘遮挡input框-白红宇

完美修复ios原生键盘遮挡input框

阅读量：30375 次

发布时间：2020-01-04

本文共 1180 字，大约阅读时间需要 3 分钟。

最近在做一个仿微信的聊天界面，有一个固定在页面底部的input框，本来使用fixed定位在底部，在android手机上没有任何问题，但在iOS上当点击输入内容的时候会出现不同情况的原生键盘遮挡输入框的情况。度娘出了很多解决方法，但没有一个方法可以完美解决，而且发现很多人都有这个问题，自己就苦思冥想出了一个相对不错的解决方法，跟大家分享一下。

先跟大家列举一下网上的解决方法，还有我的实践结果

position

// 修改position:fixed; position:absolute;// position:fixed;position:absolute;

实践证明没有任何影响，就算不使用定位也会出现遮挡输入框的情况

scrollTop

setTimeout(function(){    document.body.scrollTop = document.body.scrollHeight;},300)

这种方法在iOS10上可以解决遮挡的问题，但在iOS11上会出现键盘先将输入框顶上去然后输入框又快速回到屏幕底部再次被遮挡的情况

scrollIntoView scrollIntoViewIfNeeded

这两种方法完全看不出任何效果

我的解决方法

直接上代码

// css.mainBox{    height:100vh;    position:relative;}.inputBox{    position:absolute;    bottom:0;}// 输入框获得焦点事件onFocus() {    setTimeout(function(){        // 设置body的高度为可视高度+302        // 302为原生键盘的高度        document.getElementsByTagName('body')[0].style.height = (window.innerHeight + 302) + 'px';        document.body.scrollTop = 302;    }, 300)}// 输入框失去焦点事件onBlur() {    // 设置body恢复原来的高度    document.getElementsByTagName('body')[0].style.height = window.innerHeight + 'px';}

这种方法相当于给body增加一个键盘的高度，正好可以占掉键盘的位置，把页面内容顶上去，然后还要阻止一个body的滚动事件，防止用户滑动页面把增加的302的白页面滚动出来。（因为手边没有iPhone X手机，所以在iPhone X上兼容可能是不太完美，不过也就只是键盘的高度不同。可以通过判断手机型号设置不同高度的方式解决）

你可能感兴趣的文章