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. oracle查询查询出某字段为空后前台不显示的小测试1

    1.nvl(,''),后台会打印null,前台不显示 2不处理,后台显示null,前台不显示 3.nvl(,' '),后台显示" ",前台显示“ ”

  2. scrapy 快速入门

    https://blog.csdn.net/u011054333/article/details/70165401

  3. Verilog风格

    Verilog HDL编写原则: 可移植性强(多用宏定义:少用嵌入代码中的常数,即Magic Number:使用头文件): 必要的注释,代码易读: 模块间耦合尽可能低: 变量名与宏的命名规则: 变量名 ...

  4. Java异常处理——如何跟踪异常的传播路径？

    当程序中出现异常时,JVM会依据方法调用顺序依次查找有关的错误处理程序. 可使用printStackTrace 和 getMessage方法了解异常发生的情况: printStackTrace:打印方 ...

  5. vue设置路由跳转参数，以及接收参数

    最近做Vue项目,遇到了一个路由跳转问题:首页要跳转到项目页指定的Tab选项卡项,一开始总是跳到默认项.解决方法如下: 在跳转链接处设置了路由跳转参数,如下: <router-link  :to ...

  6. ajax请求中包含中文参数

    对需要传递的中文参数先进行两次转码: 1.js文件中使用encodeURI()方法. var url = "Validate.jsp?id=" + encodeURI(encode ...

  7. turtle画戒指

    import turtleturtle.bgcolor('black')turtle.speed(5)turtle.pensize(3)for i in range(1,5): turtle.righ ...

  8. Delphi中Chrome Chromium、Cef3学习笔记（四）

    原文   http://blog.csdn.net/xtfnpgy/article/details/48155323   一.遍历网页元素并点击JS: 下面代码为找到淘宝宝贝页面,成交记录元素的代码: ...

  9. Axis2 服务器端抛出ServiceClass object does not implement问题解决方法

    在用eclipse配合Axis2进行开发的时候,编译通过,启动tomcat也顺利,但是就是在调用服务器端的服务时,会抛出: The ServiceClass object does not imple ...

  10. ThinkPHP 整合微信支付 扫码支付 模式二 图文教程

    这篇文章主要介绍扫码支付场景二. 目前有两种模式,模式一比模式二稍微复杂点,至于模式一与模式二的具体内容,流程,微信开发文档都有详细介绍,这里就不多说废话,接下来赶紧上教程! [title]下载SDK ...