<!-- 代码段1 -->
<body>
    <!-- 可以滚动的区域 -->
    <main id="J_box">
        <!-- 内容在这里... -->
    </main>
    <!-- fixed定位的底部 -->
    <footer id="J_footer">
        <input type="text" placeholder="" id="J_f_input"/>
        <button id="J_f_submit">提交</button>
    </footer>
</body>
footer, main {
    display: block;
}
footer {
    position: fixed;
    height: 1.5rem;
    left: 0;
    right: 0;
    bottom: 0;
}
main {
    margin-top: 1.8rem;
    margin-bottom: 1.5rem;
    height: 20rem;
}
<!-- 代码段2 -->
<body>
<!-- 可以滚动的区域 -->
<main>
    <div class="content">
        <!-- 内容在这里... -->
    </div>
</main>
<!-- fixed定位的底部 -->
<footer id="J_footer">
    <input type="text" placeholder="" id="J_f_input"/>
    <button id="J_f_submit">提交</button>
</footer>
<body>
footer, main {
    display: block;
}
footer {
    position: fixed;
    height: 1.5rem;
    left: 0;
    right: 0;
    bottom: 0;
}
main {
    margin-top: 1.8rem;
    margin-bottom: 1.5rem;
    height: 20rem;
}
main {
    /* main绝对定位，进行内部滚动 */
    position: absolute;
    top: 1.8rem;
    bottom: 1.5rem;
    /* 使之可以滚动 */
    overflow-y: scroll;
    /* 增加该属性，可以增加弹性 */
    -webkit-overflow-scrolling: touch;
}
main .content {
    height: 20rem;
}

问题描述：在iPhone浏览器中，唤起input的键盘后，滑动页面时，fixed定位的J_footer元素跟随页面一起滑动了。另外，ios4下不支持position:fixed。
问题分析：唤起键盘后，fixed属性失效，当页面滑动超过一屏时，fixed的元素就会跟随页面一起滑动。android下fixed表现要比iPhone更好，一般不会出现fixed的元素游离。
解决方案：
一、动态修改position值
采用代码段1，input获得焦点时，设置position值为static，input失去焦点时，设置position值为fixed。
二、修改滚动区域的样式和布局
iPhone中用代码段2，因为android2.3+不支持overflow-scrolling，所以android2.3+用代码段1，android2.3-用isScroll.js。
三、统一都用isScroll.js(不建议)
1、采用代码段1，加上如下代码

<script src="iscroll.js"></script>
<script>
  var myscroll;
  function loaded(){
   myscroll = new iScroll("J_box");
  }
  window.addEventListener("DOMContentLoaded",loaded,false);
</script>

2、连锁问题
光标会乱跑；头部不见了；偶尔不能显示获得焦点的input。

fixed定位文本框引发的问题的更多相关文章

  1. html css input定位 文本框阴影 灰色不可编辑

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

  2. [Selenium With C#基础教程] Lesson-05 文本框

    作者:Surpassme 来源:http://www.jianshu.com/p/7dca7d0d1ea3 声明:本文为原创文章,如需转载请在文章页面明显位置给出原文链接,谢谢. 文本框在Web页面中 ...

  3. 【Javascript】在文本框光标处插入文字并定位光标 (转)

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

  4. WPF 文本框设置了阴影效果后，因左右的transform变化引发的拉伸渲染问题

    背景 最近遇到一个动画执行时,文本位置变化的问题.如下图: 如果你仔细看的话,当星星变小时,文本往下降了几个像素. 貌似有点莫名其妙,因为控件之间并不在同一个Panel布局控件中,不存在高度限制变化引 ...

  5. Selenium示例集锦--常见元素识别方法、下拉框、文本域及富文本框、鼠标操作、一组元素定位、弹窗、多窗口处理、JS、frame、文件上传和下载

    元素定位及其他操作 0.常见的识别元素的方法是什么? driver.find_element_by_id() driver.find_element_by_name() driver.find_ele ...

  6. Java + selenium 元素定位（6）之iframe切换（即对富文本框的操作）

    在元素定位中,对富文本框的元素定位是特别的,当我们使用普通的元素定位方法对富文本框进行操作时,我们会发现不管我们之前介绍的八种方法中的任何方法,我们都不能成功定位到富文本框,并对其进行操作.那是因为富 ...

  7. C#用户自定义控件(含源代码)-透明文本框

    using System; using System.Collections; using System.ComponentModel; using System.Drawing; using Sys ...

  8. AlloyRenderingEngine文本框组件

    写在前面 Github: https://github.com/AlloyTeam/AlloyGameEngine 在dom元素里,自带了input标签,设置其type为text,它就是一个文本框. ...

  9. [WPF]带下拉列表的文本框

    控件我已经弄好了,代码比较多,所以没办法全面介绍. 一开始我是直接继承Selector类来实现,做是做出来了,不过发现性能不太好.于是,我就想着自己来实现.毕竟我是做给自己用的,也不考虑过多的东西,也 ...

随机推荐

  1. 【POJ 3159】Candies&&洛谷P3275 [SCOI2011]糖果

    来补一下自己很久以前那个很蒟蒻很蒟蒻的自己没有学懂的知识 差分约束,说白了就是利用我们在求最短路的一个\(relax\)操作时的判断的原理 \[dis[v]>dis[u]+disj(u,v)\] ...

  2. 学习python第二天

    编程语言分为哪几种? 1. 机器语言:是通过直接编写二进制指令对计算机下达指令的编程方式 -- 0000,0000,00000000001:加载 暂存区A 存储器地址1 2. 汇编语言:是通过编写二进 ...

  3. 系统磁盘优化——"/var/spool/postfix/maildrop"

    文件清理 最近某服务器磁盘空间告警,在排查过程中发现"/var/spool/postfix/maildrop"目录下堆积了很多小文件,起初想直接删除,但是使用rm删除是提示“参数列 ...

  4. Ajax与JSON共同使用的小实例

    实现的效果: 点击“点击”按钮,可以通过Ajax从服务器调过来相应的文档文件,而不需重新加载页面. 通过json可以将调过来的文档(String)转换为相应的json对象,从而对文档中数据进行操作. ...

  5. Pandas系列（五）-分类数据处理

    内容目录 1. 创建对象 2. 常用操作 3. 内存使用量的陷阱 一.创建对象 1.基本概念:分类数据直白来说就是取值为有限的,或者说是固定数量的可能值.例如:性别.血型. 2.创建分类数据:这里以血 ...

  6. 【Java面试题】19 final，finally和finalize的区别

    总体区别 final       用于申明属性,方法和类,表示属性不可变,方法不可以被覆盖,类不可以被继承.finally     是异常处理语句结构中,表示总是执行的部分. finallize   ...

  7. Spring-Boot项目部署到单独tomcat运行

    前言: 本文是对学习SpringBoot过程中的笔记,拿最简单的项目进行部署,大家可以进行类比,文章最后会提供部署前和部署后的github地址,用代码做的笔记,可能会很乱,有兴趣的同学可以参考 正文: ...

  8. Elasticsearch High Level Rest Client 发起请求的过程分析

    本文讨论的是JAVA High Level Rest Client向ElasticSearch6.3.2发送请求(index操作.update.delete--)的一个详细过程的理解,主要涉及到Res ...

  9. windows服务器基本管理及服务搭建

    windows服务器基本管理及服务搭建 ****windows服务器系统版本:2000 2003 2008 2012 1.用户与组管理 用户:账户=账号/用户名+密码 每个账户有自己唯一的SID 账户 ...

  10. 新加坡100M带宽,国内延迟70ms,仅800元

    ▇ 新加坡100M带宽,延迟80msE3_8G_1TB_100M_5IP_800元促:E3_32G_1TB SSD_1200元 ▇ 马来西亚,独享带宽,延迟70msL5630_16G_1TB_15M_ ...