移动端键盘弹起对布局的影响

最近开发的一个基于mui框架开发的App已经基本结束，但是在开发过程中遇到了一个点击搜索框触发软键盘弹起的问题，现在总结一下

当键盘弹起时会整体上移一个键盘的高度，如果使用的是fixed布局，该部分会上移到键盘上部。

自动获取焦点，mui中关于键盘弹出自动获取焦点

1、监听resize ( Android）

var winHeight = $(window).height();  //获取当前页面高度
$(window).resize(function () {
    var thisHeight = $(this).height();
    if ( winHeight - thisHeight > 140 ) {
        //键盘弹出
    } else {
        //键盘收起
    }
})

2.监听input失焦blur（IOS）

$(document).on('focusin',function(){
    alert("键盘弹出")
})
$(document).on('focusout',function(){
    alert("键盘消失")
})

因为ios的第三方键盘可能并不会导致window resize，所以不能用resize监听，但是可以通过输入框是否获取焦点来判断； （在android中，点击键盘上的收起按钮，键盘虽然收起了，输入框仍然处于焦点状态，并没有触发focusout事件）

focusin和focusout支持冒泡，对应focus和blur, 使用focusin和focusout的原因是focusin和focusout可以冒泡，focus和blur不会冒泡，这样就可以使用事件代理，处理多个输入框存在的情况。（这个视情况而定）

3、定位布局

输入框input获取焦点时，虚拟键盘会把fixed元素顶上去(主要在部分安卓上)

 

$('.box').bind('focus',function(){ 
    $('.bot').css('position','static'); 
    //或者$('#viewport').height($(window).height()+'px'); 
}).bind('blur',function(){ 
    $('.bot').css({'position':'fixed','bottom':'0'}); 
    //或者$('#viewport').height('auto'); 
});

屏幕旋转时，出现上面问题

$(document).bind('orientationchange',function(){ 
    if(window.orientation==90 || window.orientation==-90){ 
        $('.bottom_fix').css('position','static'); 
    }else{ 
        $('.bottom_fix').css({'position':'fixed','bottom':'0'}); 
    } 
}); 

iOS下Html页面中input获取焦点被弹出键盘遮挡

var u = navigator.userAgent, app = navigator.appVersion; 
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 
if (isiOS) { 
　　window.setTimeout(function(){ 
    window.scrollTo(0,document.body.clientHeight); 
　　}, 500); 
}

 

转载于:https://www.cnblogs.com/0828-li/p/8507560.html