1. <!-- 代码段1 -->
  2. <body>
  3.     <!-- 可以滚动的区域 -->
  4.     <main id="J_box">
  5.         <!-- 内容在这里... -->
  6.     </main>
  7.     <!-- fixed定位的底部 -->
  8.     <footer id="J_footer">
  9.         <input type="text" placeholder="" id="J_f_input"/>
  10.         <button id="J_f_submit">提交</button>
  11.     </footer>
  12. </body>
  13. footer, main {
  14.     display: block;
  15. }
  16. footer {
  17.     position: fixed;
  18.     height: 1.5rem;
  19.     left: 0;
  20.     right: 0;
  21.     bottom: 0;
  22. }
  23. main {
  24.     margin-top: 1.8rem;
  25.     margin-bottom: 1.5rem;
  26.     height: 20rem;
  27. }
  1. <!-- 代码段2 -->
  2. <body>
  3. <!-- 可以滚动的区域 -->
  4. <main>
  5.     <div class="content">
  6.         <!-- 内容在这里... -->
  7.     </div>
  8. </main>
  9. <!-- fixed定位的底部 -->
  10. <footer id="J_footer">
  11.     <input type="text" placeholder="" id="J_f_input"/>
  12.     <button id="J_f_submit">提交</button>
  13. </footer>
  14. <body>
  15. footer, main {
  16.     display: block;
  17. }
  18. footer {
  19.     position: fixed;
  20.     height: 1.5rem;
  21.     left: 0;
  22.     right: 0;
  23.     bottom: 0;
  24. }
  25. main {
  26.     margin-top: 1.8rem;
  27.     margin-bottom: 1.5rem;
  28.     height: 20rem;
  29. }
  30. main {
  31.     /* main绝对定位，进行内部滚动 */
  32.     position: absolute;
  33.     top: 1.8rem;
  34.     bottom: 1.5rem;
  35.     /* 使之可以滚动 */
  36.     overflow-y: scroll;
  37.     /* 增加该属性，可以增加弹性 */
  38.     -webkit-overflow-scrolling: touch;
  39. }
  40. main .content {
  41.     height: 20rem;
  42. }

问题描述：在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，加上如下代码

  1. <script src="iscroll.js"></script>
  2. <script>
  3.   var myscroll;
  4.   function loaded(){
  5.    myscroll = new iScroll("J_box");
  6.   }
  7.   window.addEventListener("DOMContentLoaded",loaded,false);
  8. </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. BZOJ3456城市规划

    题目描述 刚刚解决完电力网络的问题, 阿狸又被领导的任务给难住了.刚才说过, 阿狸的国家有n个城市, 现在国家需要在某些城市对之间建立一些贸易路线, 使得整个国家的任意两个城市都直接或间接的连通.为了 ...

  2. request对象的方法及其参数的传递

    先设计一个简单的登录界面index.htm: <html><head><title>request的使用</title></head>< ...

  3. java 简单程序

    public class a{ public static void main(String[] args) { System.out.println("Hello world") ...

  4. jdbc批处理进行多条数据插入

    package cn.linjun.demo; import java.sql.Connection; import java.sql.DriverManager; import java.sql.S ...

  5. 五十一、进程间通信——System V IPC 之进程信号量

    51.1 进程信号量 51.1.1 信号量 本质上就是共享资源的数目,用来控制对共享资源的访问 用于进程间的互斥和同步 每种共享资源对应一个信号量,为了便于大量共享资源的操作引入了信号量集,可对所有信 ...

  6. 高并发秒杀系统--Service事务管理与继承测试

    [Spring IoC的类型及应用场景]  [Spring事务使用方式] [Spring事务的特性] [Spring事务回滚的理解] [Service声明式事务的配置] 1.配置事务管理器 2.配置基 ...

  7. clam简单使用

    clam简单使用: 0,首先,要全局安装Nodejs,不再赘述.clam依赖node使用 1,打开 cmd 2,全局安装clam:npm -g install clam 3,切换到目的盘下,新建一个空 ...

  8. pytorch multi-gpu train

    记录一下pytorch如何进行单机多卡训练: 官网例程:https://pytorch.org/tutorials/beginner/blitz/data_parallel_tutorial.html ...

  9. jQuery ajaxForm和 ajaxSubmit注意

    http://jquery.malsup.com/form/#file-upload 在使用jQuery异步上传时,需要注意在存在文件上传时,要将返回数据的contentType设置为text/htm ...

  10. gdb常用命令及gdb调试多进程/线程程序&coredump

    一.常用普通调试命令 1.简单介绍GDB 介绍: gdb是Linux环境下的代码调试⼯具.使⽤:需要在源代码⽣成的时候加上 -g 选项.开始使⽤: gdb binFile退出: ctrl + d 或 ...