html 软键盘弹出有空白,移动端软键盘弹出影响页面布局问题

移动端中软键盘弹出影响页面布局

在一个移动端的页面上的input中输入时，弹出的软键盘会占据window的位置。

如果当前页面的中有绝对定位的元素，例如在页面底部有一个position：fixed;bottom:0;的按钮，当软键盘弹起时，window的高度是窗体的顶部到软键盘之上，底部绝对定位的元素就会覆盖在输入框之上，影响输入。

这个问题一般出现在Android系统中。

安卓端软键盘问题

html,body,div{margin: 0;}

.message{height: 100px;}

.input-box{height: 50px;line-height: 50px;margin-top: 10px;padding: 10px;}

.input-box label{display:inline-block;width: 50px;}

.input-box input{width:80%;height: 30px;}

.footer-nav{position: fixed;bottom: 0;width: 100%;height: 50px;line-height: 50px;text-align: center;color: #ffffff;background-color: #055DAD;}

页面底部有绝对定位的元素。

姓名

电话

电话

完成提交

目前我是实践中解决这个问题是方法是：监控窗体的大小变化resize事件，窗体大小变化超过一定的阈值时，判断为软键盘弹出，弹出后将body元素的高度设置为软键盘弹出前的高度，软键盘关闭后将body元素的高度设置为100%

var winHeight = $(window).height(); //获取当前页面高度

$(window).resize(function() {

//当窗体大小变化时

var thisHeight = $(this).height(); //窗体变化后的高度

if (winHeight - thisHeight > 50) {

/*

软键盘弹出

50是设置的阈值，用来排除其他影响窗体大小变化的因素，比如有的浏览器的工具栏的显示和隐藏

*/

$('body').css('height', winHeight + 'px');

} else {

/*

软键盘关闭

*/

$('body').css('height', '100%');

}

});