修复苹果iOS 原生键盘遮挡input框

时间 2019-11-05

标签修复苹果 ios 原生键盘遮挡 input 栏目 iOS 繁體版

原文原文链接

最近在作一个仿微信的聊天界面，有一个固定在页面底部的input框，原本使用fixed定位在底部，在android手机上没有任何问题，但在iOS上当点击输入内容的时候会出现不一样状况的原生键盘遮挡输入框的状况。度娘出了不少解决方法，但没有一个方法能够完美解决，并且发现不少人都有这个问题，本身就苦思冥想出了一个相对不错的解决方法，跟你们分享一下。 javascript

先跟你们列举一下网上的解决方法，还有个人实践结果

position

// 修改position:fixed; 为position:absolute;
// position:fixed;
position:absolute;
复制代码

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

scrollTop

setTimeout(function(){
    document.body.scrollTop = document.body.scrollHeight;
},300)
复制代码

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

scrollIntoView scrollIntoViewIfNeeded

这两种方法彻底看不出任何效果android

个人解决方法

直接上代码微信

// 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上兼容多是不太完美，不过也就只是键盘的高度不一样。能够经过判断手机型号设置不一样高度的方式解决）学习

302虽然看起来不靠谱，但如今苹果的大小屏手机原生键盘都是这个高度（目前测试在5s、7p、8没有问题），如今来讲没有多大问题。也正在寻找更加完善的方法，结果出来再跟你们分享。别的输入法也正在想办法解决，有好的解决办法的欢迎一块儿交流学习测试