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. Python2中生成时间戳（Epoch，或Timestamp）的常见误区

    在Python2中datetime对象没有timestamp方法,不能很方便的生成epoch,现有方法没有处理很容易导致错误.关于Epoch可以参见时区与Epoch 0 Python中生成Epoch ...

  2. udt的java实现

    udt协议是什么? 我就不回答了,可以网上搜索,一直都是c++的,java的实现已经很久没有修改了 经过测试,java版本有些一问题,现在已经将其修复,已经上传到csdn 另外自己根据实际的应用,再次 ...

  3. 彻底解决windows10+matlab2018a调用libsvm时出现找不到编译器问题

    本文转载自:Shane Zhao博客(CSDN) https://blog.csdn.net/silence2015/article/details/53106156 个人申明,只是因为解决这个问题花 ...

  4. SVN忽略已提交的文件（ignore，移出版本控制）

    本文适用于已安装TortoiseSVN客户端的同学. 1.右键点击要忽略的文件夹或文件,鼠标移到“TortoiseSVN”,找到“Unversion and add to ignore list”,选 ...

  5. python如何安装cv2

    使用pip3 安装cv2包的时候报错 PS C:\Users\lenovo> pip3 install cv2 Collecting cv2 Could not find a version t ...

  6. Burp Suite设置代理

    一.确认代理信息 打开Burp Suite,查看proxy->options,看到Interface一栏为127.0.0.1:8080. 二.在Firefox中设置代理服务器 可以下载工具Fox ...

  7. Python第8天

    zip() 拉链方法 max(字典) 默认比较字典的key,不同类型的数据不能比较,只要可以被for迭代即可 利用zip与max(字典)共同使用 ord() — chr()    ascii码表数字与 ...

  8. c#关于var的介绍和用法

    var关键字---根据初始化语句推断变量类型 功能: var关键字指示编译器根据初始化语句右侧的表达式推断变量的类型,推断类型可以是内置类型,匿名类型,用户定义类型,.NET Framework类库中 ...

  9. Zabbix常见问题

    1.Q:  agent日志中出现“active check configuration update from [127.0.0.1:10051] started to fail (cannot co ...

  10. leetcode894

    class Solution { private Map<Integer, List<TreeNode>> memo; public List<TreeNode> ...