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

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

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

时间: 2024-07-31 14:57:12

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

ios弹出软键盘时fixed失效及点击空白处隐藏层的解决办法

一.实现点击按钮弹出层和点击空白处隐藏层,event.stopPropagation()是关键,阻止传导. <script type="text/javascript"> $(function () { $('#btnShow').click(function (event) { event.stopPropagation(); $('#div_apply').toggle(); }); $(document).click(function (event) { $('#di

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

该文章为转载 我们在做移动web应用的时候,常常习惯于使用position:fixed把一个input框作为提问或者搜索框固定在页面底部.但在IOS的safari和webview中,对position:fixed的支持不是很好(在IOS5之前甚至还不支持position:fixed).我遇到的其中一个问题就是,在iOS6+环境下,input focus弹出输入法的时候,设置了position fixed的input框浮在页面上了,而不是吸附在软键盘上.效果如图(图片来源于网上): 而Androi

移动端弹出软键盘导致input光标和点击事件错位问题

我遇到的问题:在微信浏览器里,点击蒙层的input框,弹出软键盘,蒙层被顶上去,同时input的焦点和button的点击事件也被顶上去了,软键盘消失,蒙层回到原位,但是点击input和button均没反应,点击蒙层被顶上去的位置有反应,因为input的焦点和button的点击事件没回到原位.这个问题出现在ios中,android手机没问题. 以下是一位大佬写的解决方法,解决了我的问题. 原文地址:https://blog.csdn.net/Doubleu_/article/details/865

禁止移动端input弹出软键盘

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

Cocos2d-X中使用CCTextFieldTTF的简单应用显示文本和弹出软键盘

 学了几天Cocos2d-X后今天终于可以试试Cocos2d-X的跨平台开发了,由于条件的限制,我只会测试Cocos2d-X在Android平台上的开发,今天就以一个简单的文本测试Android上的效果,需要用到CCTextFieldTTF类,CCTextFieldTTF是一个显示文本控件的类用于输入文本和现实文本类似于Windows编程中的Static控件和Edit控件 程序实例:使用TextFieldTTF类创建一个文本,触摸文本弹出软键盘 首先创建一个TextFieldTTF.h的头文

mui+回复弹出软键盘

最近再做一个APP的时候,有一个评论回复的功能,在做APP的时候,直接用手指触发focus事件,来唤醒软键盘的弹出没有问题, 但是现在的功能需要对点击回复进行弹出软键盘来操作,参考过很多都有问题,后来仔细看了下官方的DEMO,发下这个问题是可以被解决掉的.具体方法如下: <style type="text/css"> .show-input-main{width: 100%; height:40px; border: 1px solid red; position: fix

EditText 单击无法弹出软键盘

EditText是android系统自带的控件,通过单击,系统会自动调用当前输入法的软键盘,但是有时候却会出现edittext无法弹出软键盘的情况. 说说我目前遇到这种情况的环境.本人在创建一个装着listview的菜单fragment,右边是相应的每个listitem对于的内容,用另一个fragment来包容一些带有edittext控件的布局. 在一开始单击edittext还是正常的,但是当滑动listview的时候,再次单击edittext,居然没有弹出相应的软键盘.这个问题困扰了我许久,因

EditText默认不弹出软键盘

#EditText默认不弹出软键盘# 网上关于EditText默认情况下不弹出软键盘,当手触摸到EditText,获取焦点时候,才会弹出软键盘,貌似都不能用,其实,在oncreate()方法中,加上 getWindow().setSoftInputMode( WindowManager.LayoutParams.SOFT_INPUT_STATE_HIDDEN); 就能达到预期效果,至于,让EditText永远不获取焦点的方法,网上大把的,百度即可,暂时没有遇见让EditText永远不获取焦点的场

弹出软键盘时,不把activity整体往上移,只移动部分

如图,EditText在整个activity的最下方,当弹出软键盘时,如果整个activity往上移动,会导致最上面那些部分会看不见,而中间又还有这么多空白的空间,显然不合理. 为了只移动activity中的部分空间,可以将这块部分放在ScrollView中,设置ScrollView的layout_weight="1",即让他占满空位.当弹出软键盘时,就会去移动这部分的空间了.