正常状态下

input focus软键盘弹出时

问题描述:

头部结构fixed,滚动到下部内容区域,input、textarea等focus弹出软键盘时,头部位置偏移被居中(该问题ios7 beta3已修复),当软键盘关闭时,头部结构位置又恢复正常

安卓手机下,fixed表现要比ios好,不会出现此问题

然而在移动端里,基本上所有手机,页面滚动的时候,任何js都不会执行,所以寻找css的方法(且js方法比较消耗性能)

各类大网站的解决方法:一般是页面上避免悬挂元素,或者有悬挂元素时,避免产生软键盘弹出事件

目前css的解决方法:

头部依旧fixed,中间有input、textarea等部分也fixed,width:100%,top值为顶部高度,bottom:0(如果顶部也fixed,则bottom值为底部高度),overflow:scroll

缺点:体验差,有卡顿感,且虽然也能滚动,但是手机上显示不出滚动条。

如果你有更好的解决方法,欢迎指点

ios下input focus弹出软键盘造成fixed元素位置移位的更多相关文章

  1. ios下input获取焦点以及在软键盘的上面

    <!----/此方法基于zepto.min.js--> <!--/div元素没有blur和focus事件,blur focus 只适用于input 这类的表格元素--> < ...

  2. EditText根据焦点弹出软键盘

    //每次启动都清除焦点 myCourse_roomId_input.setText(""); myCourse_roomId_input.clearFocus(); //判断是否获 ...

  3. 解决IOS safari在input focus弹出输入法时不支持position fixed的问题

    该文章为转载 我们在做移动web应用的时候,常常习惯于使用position:fixed把一个input框作为提问或者搜索框固定在页面底部.但在IOS的safari和webview中,对position ...

  4. 禁止移动端input弹出软键盘

    在做三级联动,或者一些时间插件的时候总是弹出软键盘,用下面的方法就可以禁用掉,废话不多说直接上代码. HTML代码 <div class=""> <div> ...

  5. mui+回复弹出软键盘

    最近再做一个APP的时候,有一个评论回复的功能,在做APP的时候,直接用手指触发focus事件,来唤醒软键盘的弹出没有问题, 但是现在的功能需要对点击回复进行弹出软键盘来操作,参考过很多都有问题,后来 ...

  6. EditText默认不弹出软键盘

    #EditText默认不弹出软键盘# 网上关于EditText默认情况下不弹出软键盘,当手触摸到EditText,获取焦点时候,才会弹出软键盘,貌似都不能用,其实,在oncreate()方法中,加上 ...

  7. AppCompatActivity 去掉标题栏和EditText弹出软键盘遮住输入框问题

    1. AppCompatActivity去掉标题栏 此处除掉标题栏,需要注意一点,AppCompactActivity是继承自Activity.然而,AppCompactActivity据查看网上资料 ...

  8. (转载) EditText初始不弹出软键盘,只有光标显示,点击再弹出

    EditText初始不弹出软键盘,只有光标显示,点击再弹出 2013-06-08 10:13 21305人阅读 评论(5) 收藏 举报  分类: android基础(91)  版权声明:本文为博主原创 ...

  9. (原)android的alertdialog中加入edittext但是不弹出软键盘等问题的解决与原因

    摘要:alertdialog中加入edittext但是不弹出软键盘等问题网上有很多不管用的解决方案, 本文意在给出更有效的解决办法,并初步探究其原因 正文 在对话框中插入文本框是十分常见的需求 通常我 ...

随机推荐

  1. Tomcat6.0的Thisisverylikelytocreateamemoryleak异常

    從Apache Tomcat 5.5升級到6.0,通常不用太大的修改,原有的Web Application就能繼續運作.不過在server.xml中設定MySQL Datasource,卻出現一串惱人 ...

  2. [转载] 新兵训练营系列课程——平台服务部署及Web框架

    原文: http://weibo.com/p/1001643875679132642345 大纲 微博平台主要负责微博基础功能.接下来将会介绍 平台的作用,以及服务提供的形式 平台Web服务的部署 平 ...

  3. 如何制作exe程序可执行文件

    很多软件的运行都需要搭建环境,只有exe文件可以在不安装软件和数据库的环境下运行,那么怎么制作exe程序可执行文件呢,下面天使教你如何制作.   工具/原料   Microsoft Visual St ...

  4. 【Todo】蒙特卡洛(蒙特卡罗)树 & 卷积网络

    https://www.zhihu.com/question/41176911/answer/90066752 这里面有关于Deep Learning和蒙特卡洛树的一些内容 https://www.z ...

  5. iOS开发之Xcode6 之手动添加Pch预编译文件

    参考文档 http://blog.csdn.net/crazyzhang1990/article/details/44243343 红色部分为本人自己补充注意事项 在Xcode6之前,创建一个新工程x ...

  6. TCP/IP协议学习(一) LWIP实现网络远程IAP下载更新

    最近需要实现通过TCP/IP远程IAP在线更新功能,忙了2周终于在原有嵌入式服务器的基础上实现了该功能,这里就记录下实现的过程. IAP又称在应用编程,其实说简单点就是实现不需要jlink,仅通过芯片 ...

  7. Maven——聚合与继承

    原文:http://www.cnblogs.com/xdp-gacl/p/4058008.html 一.聚合 如果我们想一次构建多个项目模块,那我们就需要对多个项目模块进行聚合 1.1.聚合配置代码 ...

  8. MyBatis——解决字段名与实体类属性名不相同的冲突

    原文:http://www.cnblogs.com/xdp-gacl/p/4264425.html 在平时的开发中,我们表中的字段名和表对应实体类的属性名称不一定都是完全相同的,下面来演示一下这种情况 ...

  9. Selenium解决页面元素不在视野范围内的问题

    当需要使用滚动条才能使页面元素显示在视野范围内时,必须用代码处理下,才能对其进行操作. 处理其实也很简单,就是调用JS函数. driver.executeScript("arguments[ ...

  10. 界面显示这个时间格式的js代码: 2016年1月19日 星期二 乙未(羊)年 腊月初十

    today=new Date();function initArray(){ this.length=initArray.arguments.length for(var i=0;i<this. ...