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. Go 1.11 Module 介绍

    title: "Go 1.11 Module" date: 2018-10-26T23:50:56+08:00 draft: false --- Go 1.11 Module 介绍 ...

  2. Pathon学习笔记1

    1.解释型语言和编译型语言 编译型:需要一个翻译的程序——编译器(Compiler)对源代码进行转化,变成可执行代码,称为编译(Compile).大的复杂的程序还需要链接程序(Linker)来链接各个 ...

  3. 自定义panel实现，并实现item更改和移除动画。

    原地址:https://www.cnblogs.com/yk250/p/10043694.html  无图无真相: 1,重写panel类(模拟实现一个竖直方向排列的panel,相当于默认的StackP ...

  4. 搭建zookeeper+kafka集群

      搭建zookeeper+kafka集群 一.环境及准备 集群环境:   软件版本: 部署前操作: 关闭防火墙,关闭selinux(生产环境按需关闭或打开) 同步服务器时间,选择公网ntpd服务器或 ...

  5. Robot Framework 自动化框架大纲

    Python + Robot Framework 环境搭建 Android SDK + Appium 环境搭建 RobotFramework - AppiumLibrary 之元素定位 RobotFr ...

  6. [java,2019-01-28] 枪手博弈，谁才是最后赢家

    什么是枪手博弈: 枪手博弈指彼此痛恨的甲乙丙三个枪手准备决斗.甲枪法最好,十发八中.乙枪法次之,十发六中.丙枪法最差,十发四中.假设他们了解彼此实力,也能做出理性判断. 问题一:如果三人同时开枪,并且 ...

  7. .NET Core 中的通用主机和后台服务

    简介 我们在做项目的时候, 往往要处理一些后台的任务. 一般是两种, 一种是不停的运行,比如消息队列的消费者.另一种是定时任务. 在.NET Framework + Windows环境里, 我们一般会 ...

  8. 关于std::thread

    std::thread基本用法 1.普通函数: std::thread thread(func, param, ...) 2.类成员函数: std::thread thread(&class_ ...

  9. Idea spring 配置文件报红 URI is not registered

    把报错的加到如下忽略列表中

  10. PostgreSQL函数(存储过程)----笔记

    PostgreSQL 函数也称为 PostgreSQL 存储过程. PostgreSQL 函数或存储过程是存储在数据库服务器上并可以使用SQL界面调用的一组SQL和过程语句(声明,分配,循环,控制流程 ...