手机wap页面表单被键盘遮挡的一个解决方法

一知

于 2015-08-21 10:34:28 发布

阅读量2.7k

点赞数

分类专栏： web前端文章标签： wap 表单键盘遮挡

本文链接：https://blog.csdn.net/laozhangu/article/details/47830621

版权

web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

解决思路通过window.innerHeight和window.onresize解决

//参考代码
var ih=window.innerHeight;
window.οnresize=function(){
    var _form=document.getElementById('form');
    if (window.innerHeight<ih) {
        _form.style.marginTop='55px';
    }else{
         _form.style.marginTop='0';
    };
}

//如果大家喜欢使用jquery
var ih=window.innerHeight;
$(window).resize(function(event) {
    if (window.innerHeight<ih) {
        $('#form').css({'margin-top':'55px'});
    }else{
        $('#form').css({'margin-top':'0'});
    };
});