ios下input focus弹出软键盘造成fixed元素位置移位
正常状态下
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元素位置移位的更多相关文章
- ios下input获取焦点以及在软键盘的上面
<!----/此方法基于zepto.min.js--> <!--/div元素没有blur和focus事件,blur focus 只适用于input 这类的表格元素--> < ...
- EditText根据焦点弹出软键盘
//每次启动都清除焦点 myCourse_roomId_input.setText(""); myCourse_roomId_input.clearFocus(); //判断是否获 ...
- 解决IOS safari在input focus弹出输入法时不支持position fixed的问题
该文章为转载 我们在做移动web应用的时候,常常习惯于使用position:fixed把一个input框作为提问或者搜索框固定在页面底部.但在IOS的safari和webview中,对position ...
- 禁止移动端input弹出软键盘
在做三级联动,或者一些时间插件的时候总是弹出软键盘,用下面的方法就可以禁用掉,废话不多说直接上代码. HTML代码 <div class=""> <div> ...
- mui+回复弹出软键盘
最近再做一个APP的时候,有一个评论回复的功能,在做APP的时候,直接用手指触发focus事件,来唤醒软键盘的弹出没有问题, 但是现在的功能需要对点击回复进行弹出软键盘来操作,参考过很多都有问题,后来 ...
- EditText默认不弹出软键盘
#EditText默认不弹出软键盘# 网上关于EditText默认情况下不弹出软键盘,当手触摸到EditText,获取焦点时候,才会弹出软键盘,貌似都不能用,其实,在oncreate()方法中,加上 ...
- AppCompatActivity 去掉标题栏和EditText弹出软键盘遮住输入框问题
1. AppCompatActivity去掉标题栏 此处除掉标题栏,需要注意一点,AppCompactActivity是继承自Activity.然而,AppCompactActivity据查看网上资料 ...
- (转载) EditText初始不弹出软键盘,只有光标显示,点击再弹出
EditText初始不弹出软键盘,只有光标显示,点击再弹出 2013-06-08 10:13 21305人阅读 评论(5) 收藏 举报 分类: android基础(91) 版权声明:本文为博主原创 ...
- (原)android的alertdialog中加入edittext但是不弹出软键盘等问题的解决与原因
摘要:alertdialog中加入edittext但是不弹出软键盘等问题网上有很多不管用的解决方案, 本文意在给出更有效的解决办法,并初步探究其原因 正文 在对话框中插入文本框是十分常见的需求 通常我 ...
随机推荐
- SAP供应商和客户的创建
进来遇到一个创建供应商的需求,由于在系统中关于供应商和客户的创建比较特殊,且没有相关函数进行创建, 找到一个类和方法来创建,类名:VMD_EI_API 方法名:MAINTAIN_DIRECT_INP ...
- Java注解Annotation学习
学习注解Annotation的原理,这篇讲的不错:http://blog.csdn.net/lylwo317/article/details/52163304 先自定义一个运行时注解 @Target( ...
- 选择排序算法Java与Python实现
Java 实现 package common; public class SimpleArithmetic { /** * 选择排序 * 输入整形数组:a[n] [4.5.3.7] * 1. 取数组编 ...
- redhat 6.4 yum 本地配置简记
准备工作 ----------------------------------------------------------------------------- 1. 加载光驱 将iso镜像文件 ...
- idea项目部署
idea新建项目: http://blog.csdn.net/wo541075754/article/details/46348135 详细 http://www.cnblogs.com/wql02 ...
- phprpc 使用实例(例实没错却不能执行)函数冲突gzdecode
PHPRPC 是一个轻型的.安全的.跨网际的.跨语言的.跨平台的.跨环境的.跨域的.支持复杂对象传输的.支持引用参数传递的.支持内容输出重定向的.支持分级错误处理的.支持会话的.面向服务的高性能远程过 ...
- Eclipse远程调试出现“JDWP Transport dt_socket failed to initialize”的解决方案
欢迎关注我的社交账号: 博客园地址: http://www.cnblogs.com/jiangxinnju/p/4781259.html GitHub地址: https://github.com/ji ...
- 一个最简html5文档来说明html5的新特性和写法
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...
- jquery函数
1.ready函数 当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件. $(document).ready(function (){alert('11 ...
- robotframework笔记4
机器人框架概述 机器人框架是一个通用的开源的自动化测试框架 验收测试和验收测试驱动开发(ATDD).它具有易于使用的表格的测试数据 语法采用关键字驱动 测试方法.其检测能力可以通过测试库 用Pyt ...