<!-- 代码段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. CF993D Compute Power（二分+Dp）

    一看到这种求\(min/max\left \{ \frac{\sum a_i}{\sum b_i} \right \}\)的题肯定是\(01\)分数规划,大概可以算作一种二分? 设\(ans\)为当前 ...

  2. codeforces 1077F2. Pictures with Kittens (hard version)单调队列+dp

    被队友催着上(xun)分(lian),div3挑战一场蓝,大号给基佬紫了,结果从D开始他开始疯狂教我做人??表演如何AKdiv3???? 比赛场上:A 2 分钟,B题蜜汁乱计数,结果想得绕进去了20多 ...

  3. python之路day06--python2/3小区别，小数据池的概念，编码的进阶str转为bytes类型，编码和解码

    python2#print() print'abc'#range() xrange()生成器#raw_input() python3# print('abc')# range()# input() = ...

  4. Java基础 -- 复用类(组合和继承)

    复用类有两种实现方式. 在新的类中产生现有类的对象,由于新的类是由现有类的对象所组成,所以这种方法称之为组合. 采用继承实现. 一  组合语法 下面创建两个类WaterSource和Sprinkler ...

  5. Python生成器，迭代器,可迭代对象

    在了解Python的数据结构时,容器(container).可迭代对象(iterable).迭代器(iterator).生成器(generator).列表/集合/字典推导式(list,set,dict ...

  6. Matlab怎么修改显示数值格式/精度/小数位数

    参考:https://jingyan.baidu.com/article/7f41ecec1ad029593c095c70.html

  7. HTML多图片压缩上传

    本文介绍的是多张图片在前端统一压缩后再通过ajax提交给后台处理的业务,使用到的是LocalResizeIMG.js插件. 一.首先介绍项目结构 二.分享引用核心文件,这里没有分享CSS文件,因为没有 ...

  8. 类型和原生函数及类型转换（三：终结js类型转换）

    Number() parseInt() parseFloat() Boolean() String() toString() 一.显式类型转换 -------Number()函数把对象的值转换为数字. ...

  9. MySQL学习笔记（五）并发时经典常见的死锁原因及解决方法

    MySQL都有什么锁? MySQL有三种锁的级别:页级.表级.行级. 表级锁:开销小,加锁快:不会出现死锁:锁定粒度大,发生锁冲突的概率最高,并发度最低. 行级锁:开销大,加锁慢:会出现死锁:锁定粒度 ...

  10. 第十五节：HttpContext五大核心对象的使用(Request、Response、Application、Server、Session)

    一. 基本认识 1. 简介:HttpContext用于保持单个用户.单个请求的数据,并且数据只在该请求期间保持: 也可以用于保持需要在不同的HttpModules和HttpHandlers之间传递的值 ...