js：

//防止背景图被手机键盘压缩变形

$(document).ready(function () {

       $('body').css({'height':$(window).height()})

});

//当点击input出现手机键盘时，窗口大小改变，隐藏footer以防止footer被手机键盘顶上来

$(function(){

    var oHeight = $(window).height(); //浏览器当前的高度

    $(window).resize(function(){ //当浏览器窗口的大小改变时，发生 resize 事件。

        if($(window).height() < oHeight){

            $("#hui-footer").css("display","none");

        }else{

            $("#hui-footer").css("display","inline-flex");

        }

    });

})

css：

html,body{

    height: 100%;  //让没有内容的body撑起满屏

}

body{

    position: relative;

    background: url(img/register.jpg) center no-repeat;

    background-size: cover;

}

.hui-form{

    position: absolute;

    top: 25%;

    padding:10px;

    opacity: 0.7;

}
表单根据body定位，这样表单里的输入框那块就不会被手机键盘顶上去,body{ position: relative;}这个地方很重要。

html：

<body>

  <div class="hui-wrap">

    <div class="hui-form">

        <form id="form1" action="" method="post">

            <div class="hui-form-items">

                <div class="hui-form-items-title">手机号码</div>

                <input type="number" id="phone" name="phone" class="hui-input hui-input-clear" placeholder="请输入手机号码" value="18614522541"/>

            </div>

            <div class="hui-form-items">

                <div class="hui-form-items-title">验证码</div>

                <input type="text" id="vertify" name="vertify" class="hui-input hui-input-clear" placeholder="请输入短信验证码" value="4006337707"/>

                <button id="icode1" type="button" class="hui-button hui-primary hui-button-small hui-fr identicode">获取验证码</button>

            </div>

        </form>

        <div style="padding:20px 8px;">

            <button id="loginbtn" type="button" class="hui-button hui-primary hui-button-large">登陆</button>

        </div>

    </div>

    <div id="hui-footer" class="footer">

        <div class="followup" id="delete" style="background-color: #007AFF;">确定</div>

        <div class="followup" id="allot">取消</div>

    </div>

  </div>

</body>

登录界面，body上有背景图，点击输入框时，弹出的手机键盘会把背景图顶变形，而且会把footer顶上去的更多相关文章

  1. PLSQL 登录时弹出(没有登录)空白提示框

    如题,在登录的时候莫名出现了plsql登录时弹出(没有登录)的空白提示框,在网上找了很多方法之后都不行,然后发现plsql的 oracle主目录名莫名的成了空,然后直接重新把它的目录设置上 重启pls ...

  2. js弹窗 js弹出DIV,并使整个页面背景变暗

    1.首先写一个遮罩层div,然后再写一个弹窗的div <!-- 遮罩层 --> <div id="cover" style="background: # ...

  3. ios兼容 input输入时弹出键盘框 页面整体上移键盘框消失后在ios上页面不能回弹的问题

    前端h5混合开发手机端ios  当有input输入时,手机下方弹出键盘使页面上移,当输入完成,键盘消失后页面显示回到原位,但实际不能点击(可点击上方区域,有反应),也就是说实际是没有回弹. 解决办法: ...

  4. [Phonegap+Sencha Touch] 移动开发24 打包wp8.1的App，执行时输入框聚焦弹出软键盘之后，界面上移而不恢复原位的解决的方法

    这个现象仅仅出如今phonegap打包sencha touch的wp8.1程序会出现(仅wp8.1,wp8正常),其他js框架我測试了几个(app framework, jquery mobile), ...

  5. 微信小程序授权登录以及用户信息相关接口调整导致授权框不弹出

    前言:4月8号升级了小程序业务后提交了版本并上线.突然一个同事说体验版的点击"登录"按钮无效.当时觉得应该不会呀,这几天一直用手机调试,每天也在不停的登录授权,弹框一直有的呀.然后 ...

  6. UIView点击事件。弹出视图，背景虚化。

    @interface CountryViewController //背景 @property (strong, nonatomic) UIView *BackView; end //设置背景虚化 - ...

  7. dedecms 下载时弹出提示登录框或直接下载

    http://jingyan.baidu.com/article/9f63fb918656c2c8400f0ebc.html DEDECMS 默认下载 是直接给出了一个  本地下载的   下载链接 本 ...

  8. 利用javaScript实现鼠标在文字上悬浮时弹出悬浮层

    在人人,CSDN等一些网站,当鼠标在某个东西上悬浮时,会弹出一个悬浮层,鼠标移开悬浮层消失.比如说CSDN的通知(应该是进入写新文章的页面后页面上方的那个铃铛),具体是什么实现的呢?上代码: < ...

  9. [转]C# 安装时弹出设置服务登录窗口

    本文转自:http://blog.csdn.net/prince_jun/article/details/38435887 安装服务时系统不要弹出设置服务登录窗口:在程序中将serviceProces ...

随机推荐

  1. Scala编程 摘录

    有件你会注意到的事情是,几乎所有的 Scala 的控制结构都会产生某个值.这是函数式语言所采用的方式,程序被看成是计算值的活动,因此程序的控件也应当这么做.你也可以把这种方式看做早已存在于指令式语言中 ...

  2. On-die termination for DDR

    本文转载自: https://blog.csdn.net/weixin_38233274/article/details/81016870 ODT是什么鬼?为什么要用ODT?在很多关于DDR3的博文和 ...

  3. mysql数据库的理解

    1.索引结构原理: 普通的Btree(binary search tree)就是二叉树,如下图 B+ Tree索引类型则是二叉树的升级版,每个节点存的是 <num ,最后存排序的ROWID Ha ...

  4. CentOS安装MySQL的完整步骤

    1.官方安装文档 http://dev.mysql.com/doc/mysql-yum-repo-quick-guide/en/ 2.下载 Mysql yum包 http://dev.mysql.co ...

  5. 001.[python学习]写在前面的

    0.多动手写写也许你所说的问题就不是问题: 1.最好的帮助文档是dir和help,如下图: 2.如果为了快速完成任务可以选择IDE,否则尽量不要依赖它,因为它的智能导致自己的无能: 3.也许有其他语言 ...

  6. LeetCode 100. Same Tree 判断两棵二叉树是否相等 C++

    Given two binary trees, write a function to check if they are the same or not. Two binary trees are ...

  7. bootstrap学习1

    1.form-control -宽度变成了100% -设置了一个浅灰色(#ccc)的边框 -具有4px的圆角 -设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化 -设置了placehold ...

  8. python初学心得之一

    昨天开始接触并学习python,对python有了初步印象. 一.python主要应用方向 二.python语言类型 三.python2和3的主要区别 四.常见字符编码 五.Python语法初学  一 ...

  9. MyEclipse2014破解版安装教程

    下载安装包和破解程序脚本 1.下载地址 链接:https://pan.baidu.com/s/1XuMweEz602zcoGqwPb2xTA 提取码:idsx  两个文件:myeclipse-pro- ...

  10. Django中的auth模块

    from django.contrib import auth authenticate() 提供了用户认证功能,即验证用户名以及密码是否正确,一般需要username .password两个关键字参 ...