相信大家写移动端肯定遇到过输入框被手机键盘挡住的问题,我自己也百度了很多办法,最开始是改变输入框的fixed定位为absolute定位,并不能实现效果,然后尝试用了以下方法:
// 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';
}
以上办法虽然能让输入框可视,但是可想302是个固定的值,不可能兼容所有手机,直接pass
继续百度了很多方法,最终找到完美解决方案,废话不说,直接上代码:
var bfscrolltop=document.body.scrollTop; //获取软键盘唤起前浏览器滚动部分的高度
$("input.inputframe").focus(function(){