移动端软键盘弹出后挤压页面尺寸,消失后仍然占位置
2019-11-25 本文已影响0人
Anna_Hu
最近做了个移动端密码校验的功能，但是发现在安卓机上每次输入密码的时候软键盘弹出导致密码输入弹窗尺寸被挤压了，苹果上没有这个问题，最后研究了下是因为整个body被软键盘占据了部分位置，高度发生变化了，而密码校验弹窗的高度又是body高度的30%，所以随之被挤压了。可以通过在输入框获取焦点的时候将弹窗的高度重置为之前的高度就可以了，具体代码如下：
$('.pass-input').focus(function() {
var oriHeight = $('.center-dialog').height()
$('.center-dialog').css('height', oriHeight)
})
但是发现输入框失去焦点软键盘消失后还继续占位置，具体代码如下：
$('.pass-input').blur(function() {
setTimeout(function() {
var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
window.scrollTo(0, Math.max(scrollHeight - 1, 0));
}, 100);
})
