<!-- 代码段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. Super Mario HDU - 4417 （主席树）

    Mario is world-famous plumber. His “burly” figure and amazing jumping ability reminded in our memory ...

  2. 题解：[APIO2007]风铃

    你需要选一个满足下面两个条件的风铃:(1) 所有的玩具都在同一层(也就是说,每个玩具到天花板之间的杆的个数是一样的)或至多相差一层.(2) 对于两个相差一层的玩具,左边的玩具比右边的玩具要更靠下一点. ...

  3. nginx 返回数据被截断

    nignx 代理 buffer proxy_buffers 16 512k; proxy_buffer_size 512k;   fastcgi buffer fastcgi_buffers 4 64 ...

  4. 机器学习之正则化【L1 & L2】

    前言 L1.L2在机器学习方向有两种含义:一是L1范数.L2范数的损失函数,二是L1.L2正则化 L1范数.L2范数损失函数 L1范数损失函数: L2范数损失函数: L1.L2分别对应损失函数中的绝对 ...

  5. Web请求相关

    HTTP简介 HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World Wide Web )服务器传输超文本到本地浏览器的传送 ...

  6. 第五节：从源码的角度理解各种Result(ActionResult、JsonResult、JavaScriptResult等)

    一. 背景 提到MVC不得不说MVC中的各种Result,这些高度封装的xxxResult以及在xxxResult再度封装的xxx,大大提高了MVC框架的开发效率. 相信做过MVC开发的朋友都会用到过 ...

  7. Spring Security 之API 项目安全验证(基于basic-authentication)

    ===================================Basic Authorization 规范===================================Request ...

  8. MySQL的一些基本命令笔记(3)

    指明外键: 1 :1 两个表中的主键都可以当成外键 1 :N 在 "多" 的实体表中新增加一个字段,该字段是 "一" 实体表的主键 M : N 拆成两个1 :N ...

  9. 大家都知道fastclick能解决300ms延迟，现在我们来看一下，使用方法

    1.在终端输入以下命令进行安装 npm install fastclick -S 2.在你用脚手架搭建好的项目中,找到mian.js这个入口文件,打开 3.在其中加入: import FastClic ...

  10. Centos7 设置vim 显示文本不同颜色

    Centos7 设置vim 显示文本不同颜色 本人在查找设置 centos7 vim 文本显示颜色时, 学习了作者: luffy5459 (博客连接:https://blog.csdn.net/fei ...