<!-- 代码段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. 指针运算中的运算符：&和*

    这里&是取地址运算符,*是间接运算符. &a 的运算结果是一个指针,指针的类型是 a 的类型加个 *,指针所指向的类型是 a 的类型,指针所指向的地址嘛,那就是 a 的地址. *p 的 ...

  2. python学习 day13 装饰器(一)&推导式

    装饰器&推导式 传参位置参数在前,关键词参数在后 函数不被调用内部代码不被执行 函数在被调用的时候,每次都会开辟一个新的内存地址,互不干扰 #经典案例 def func(num): def i ...

  3. 第十七节: EF的CodeFirst模式的四种初始化策略和通过Migration进行数据的迁移

    一. 四种初始化策略 EF的CodeFirst模式下数据库的初始化有四种策略: 1. CreateDatabaseIfNotExists:EF的默认策略,数据库不存在,生成数据库:一旦model发生变 ...

  4. excel转换为TXT文本

    #_*_ coding:utf-8 _*_#author:yr import xlrd data = xlrd.open_workbook(r"C:\Users\yangr\Desktop\ ...

  5. eclipse+tomcat出现警告警告: [SetPropertiesRule]...

    启动tomcat出现警告: [SetPropertiesRule]{Server/Service/Engine/Host/Context} Setting property 'source' to ' ...

  6. Lua中的语句

    [赋值] 赋值的基本含义是修改一个变量或一个table中字段的值,这个和其它语言没有多少区别,但是对于Lua,有一个特性,它允许“多重赋值”,也就是一下子将多个值赋予多个变量,例如以下代码: , pr ...

  7. Lua中的一些库（1）

    [数学库] 数学库(math)由一组标准的数学函数构成.这里主要介绍几个常用的函数,其它的大家可以自行百度解决. 三角函数(sin,cos,tan……)所有的三角函数都使用弧度单位,可以用函数deg( ...

  8. adb.exe 已停止工作解决办法

    最近因为工作原因,接触了下Android Studio,在使用真机调试的时候碰到了adb.exe 已经停止工作的错误. 虽然网上有很多和我一样的教程,但是我觉的还是记录一下自己的情况比较好,毕竟每个人 ...

  9. Mysql --数据库概述1

    什么是数据(Data)? 描述事物的符号记录称为数据,描述事物的符号既可以是数字,也可以是文字.图片,图像.声音.语言等,数据由多种表现形式,它们都可以经过数字化后存入计算机 在计算机中描述一个事物, ...

  10. Vue项目中使用webpack配置了别名，引入的时候报错

    chainWebpack(config) { config.resolve.alias .set('@', resolve('src')) .set('assets', resolve('src/as ...