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. Spring-MVC配置思路

    前言: Spring-mvc是一个解决页面代码和后台代码分离的框架. 在没有配置servlet在服务器启动时就创建被创建时,总是当请求过来了servlet对象才会被创建 因此先从请求开始. 为了给每一 ...

  2. CSS3之动画模块实现轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. tomcat安装启动之后localhost：8080页面进不去，提示错误500

    具体的错误展示页面如下: 首先,需要考虑到是不是安装的tomcat版本和自己安装的jdk的版本一致,如果不一致,建议将tomcat换成和jdk一致或者高于jdk版本的tomcat版本.(比如安装的jd ...

  4. memory_profiler的使用

    作用:memory_profiler是用来分析每行代码的内存使用情况 使用方法一: 1.在函数前添加 @profile 2.运行方式: python -m memory_profiler memory ...

  5. html弹出div

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. objective-c数组的七种遍历方法总结

    //第一种 [arr enumerateObjectsUsingBlock: ^(id obj, NSUInteger idx, BOOL *stop){     NSLog(@"%ld,% ...

  7. Storm实现实时大数据分析（storm介绍，与Hadoop比较，）

    一.storm与Hadoop对比 Hadoop: 全量数据处理使用的大多是鼎鼎大名的hadoop或者hive,作为一个批处理系统,hadoop以其吞吐量大.自动容错等优点,在海量数据处理上得到了广泛的 ...

  8. 前端生成excel

    一:安装依赖 1:在package.json 中加入四个依赖包 (1): "json2csv": "^3.11.0", (2):"file-saver ...

  9. [C++]数组指针，数组引用，函数指针

    数组指针是指一个指向数组的指针,例如有一个数组指针p指向一个数组a[],则 *p是取到这个数组,也就是说 *p=a,因此 **p =a[0], 它的定义为: ]; ]=&a; (*c)表示它是 ...

  10. [Linux]Ubuntu 16.04 远程桌面

    来源:http://blog.csdn.net/zz_1215/article/details/77921405 先吐槽一下,网上教的方法都是半桶水,都被教到连接后出现灰屏,只有这个博主(zz_121 ...