<!-- 代码段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. Ubuntu最常见的包问题

    工作环境换成Ubuntu18.04小记:https://www.cnblogs.com/dunitian/p/9773214.html Ubuntu不得不说的就是这个apt出问题的处理 :(换源就不说 ...

  2. C++ bitset 用法

    C++的 bitset 在 bitset 头文件中,它是一种类似数组的结构,它的每一个元素只能是0或1,每个元素仅用1bit空间. 下面是具体用法 构造函数 bitset常用构造函数有四种,如下 bi ...

  3. visual studio 不能跳转到函数定义

    解决办法: 工具-->扩展和更新-->联机.搜索“Go To Definition”下载然后关闭visualstudio进行安装,重启后就ok了

  4. Java基础 -- 访问控制权限

    一  包:库单元 假设我们存在两个类名相同的类,如果没有一定的措施对其进行区分,就会无法区别到底使用的是哪一个类.因此java引入了包来进行名字空间管理. 包(类库)包含有一组类,这些类在单一的名字空 ...

  5. 2019南昌邀请赛网络预选赛 J.Distance on the tree（树链剖分）

    传送门 题意: 给出一棵树,每条边都有权值: 给出 m 次询问,每次询问有三个参数 u,v,w ,求节点 u 与节点 v 之间权值 ≤ w 的路径个数: 题解: 昨天再打比赛的时候,中途,凯少和我说, ...

  6. Java多线程、线程池和线程安全整理

    多线程 1.1      多线程介绍 进程指正在运行的程序.确切的来说,当一个程序进入内存运行,即变成一个进程,进程是处于运行过程中的程序,并且具有一定独立功能. 1.2      Thread类 通 ...

  7. Kubernetes之DaemonSet控制器

    DaemonSet 简介 DaemonSet 确保全部(或者一些)Node 上运行一个 Pod 的副本.当有 Node 加入集群时,也会为他们新增一个 Pod .当有 Node 从集群移除时,这些 P ...

  8. Python 文件读取

    1. 最基本的读文件方法: # File: readline-example-1.py file = open("sample.txt") while 1: line = file ...

  9. solr面板的使用

    创建数据库 先别着急点击Add Core,先去目录下创建几个文件. 去solrhome目录下创建一个文件夹,比如test,这个文件夹就是数据库文件夹.

  10. js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...