周记3——解决fixed属性在ios软键盘弹出后失效的bug

  这周在做空间(“类似”qq空间)项目。首页是好友发表的说说,可以针对每条说说进行评论,评论框吸附固定在屏幕底部。此时,Bug来了...在ios上,软键盘弹出后fixed属性失效了。后来发现,ios绝大部分情况把fixed变成了absolute。为什么说是绝大部分情况下而不是100%,后面会提到。下面介绍2种方案...

1、css布局 (推荐)

  解决思路:既然在 iOS 下由于软键盘唤出后,页面 fixed 元素会失效,导致跟随页面一起滚动,那么假如——页面不会过长出现滚动,那么即便 fixed 元素失效,也无法跟随页面滚动,也就不会出现上面的问题了。

  那么按照这个思路,如果使 fixed 元素的父级不出现滚动,而将原 body 滚动的区域域移到 main 内部,而 header 和 footer 的样式不变,代码如下:

  结果:在原始输入法下, fixed 元素可以定位在页面的正确位置。滚动页面时,由于滚动的是 main 内部的 div,因此 footer 没有跟随页面滚动。

  上面貌似解决了问题,但是如果在手机上实际测试一下,会发现 main 元素内的滚动非常不流畅,滑动的手指松开后,滚动立刻停止,失去了原本的流畅滚动特性。由于弹性滚动的问题,发现在webkit中,下面的属性可以恢复弹性滚动:-webkit-overflow-scrolling: touch;

  经过真机测试,发现ios10系统中,偶尔点击后还是会挡住输入框,所以上面说大部分情况下可以。其实,如何用这种布局的话,fixed可以直接换成absolute,这样就能保证不同的ios系统的表现一致了。

2、利用scrollTop滚动到底部

  先看下布局代码:

//获取焦点时 --滚动到底部
interval = setInterval(function() {
    document.body.scrollTop = document.body.scrollHeight
}, 100);
//失去焦点取消
clearInterval(interval);

  综上两种方法,第一种比较通用,第二种在软键盘弹出后,虽然没遮挡输入框,但当滚动页面时,会发现输入框跟随着滚动,因此,极力推荐第一种,简单实用。

  最后想说一点,为什么ios会不识别fixed呢?因为手机屏本来能展示的内容就不多,所以不希望手机端有相对屏幕固定的元素,像某些网站的卖壮阳药广告一样死死贴在屏幕上,妨碍阅读。

参考链接:https://www.jianshu.com/p/782e61068334?tdsourcetag=s_pctim_aiomsg

原文地址:https://www.cnblogs.com/chenwenhao/p/9500969.html

时间: 2024-10-10 08:09:41

周记3——解决fixed属性在ios软键盘弹出后失效的bug的相关文章

关于ListView中EditText在软键盘弹出后的焦点问题

转自:http://www.cnblogs.com/haofei/p/3305030.html 在ListView中,每次弹出软键盘后就会重新调用getView()方法,导致EditText失去焦点. 解决办法:在getView()方法中添加监听器: editText.setOnTouchListener(new OnTouchListener() {            @Override            public boolean onTouch(View v, MotionEve

ios软键盘弹出布局上移问题解决方案

添加事件:window.scrollTo(0,0) <input class="flex f14" placeholder="请输入您的详细地址" onblur="window.scrollTo(0,0)" /> 原文地址:https://www.cnblogs.com/lezuw/p/11573757.html

怎么让软键盘弹出时,部分控件上移

之前写注册页面的时候,UI同学给我提了个意见,让弹出软键盘时候,左上角的标题"注册"不动,中间内容往上移动,效果这样经过查阅资料和多方实践,解决方法如下 1.先要设置页面软键盘模式,这样每次软键盘弹出后布局高度会减少软键盘的高度 getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_HIDDEN | WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RES

Android软键盘弹出,覆盖h5页面输入框问题

之前我们在使用vue进行 h5 表单录入的过程中,遇到了Android软键盘弹出,覆盖 h5页面 输入框 问题,在此进行回顾并分享给大家: 系统:Android 条件:当输入框在可视区底部或者偏下的位置 触发条件:输入框获取焦点,弹出软键盘 表现:软键盘 覆盖 h5页面中的输入框 问题分析: 1.发现问题:当前页面中box为flex布局,内容为上下固定高,中间自适应(中间区域内容过多会出现滚动条,input框在wrapper的底部),input获取焦点,手机键盘弹出,input未上移到可视区内,

Android软键盘弹出时把布局顶上去的解决方法

原文: 解决Andriod软键盘出现把原来的布局给顶上去的方法(转) 链接:http://blog.sina.com.cn/s/blog_9564cb6e0101g2eb.html 决方法,在mainfest.xml中,对那个Activity加: <activityandroid:name=".activity.HomeActivity"android:windowSoftInputMode="adjustPan|stateHidden"></ac

如何解决软键盘弹出引起的各种不适

1.如何解决软键盘弹出引起的各种不适 2.android软键盘弹出引起的各种不适终极解决方案 3.android软键盘弹出引起的各种不适终极解决方案 4.android软键盘弹出,会把原来的界面挤上去的问题 处理方法 5.Android 关于弹出键盘问题的几种情况和解决方案 6.Android 弹出软键盘问题(最终解决方法) 7.Android 软键盘显示隐藏监听解决方案

activity中界面中edittext自动获取焦点(软键盘弹出)解决

最近在做开发的时候遇到个比较烦的问题就是 我的某个activity页面中有editText,在一进去就会调用软键盘,这样看起来不美观,所以看了下api http://developer.android.com/guide/topics/manifest/activity-element.html(要翻墙) 在<Activity>节点下也就是在manifest文件的配置activity节点的时候需要配置 android:windowSoftInputMode 这个属性来控制软键盘的模式.我摘录了

Android 软键盘弹出时布局内指定内容上移实现及问题解决

Android SDK目前提供的软键盘弹出模式接口只有两种: 一是弹出时自动回冲界面,将所有元素上顶, 一种则是不重绘界面,直接将控件元素遮住,   没有其他模式,如果想实现其他效果,光使用系统接口是不行的.   解决方法:   第一步:给想要被顶上去的内容嵌套一个 ScrollView :   <ScrollView     android:layout_width="match_parent"     android:layout_height="0dp"

移动端 软键盘 弹出时 影响布局

移动端 软键盘 弹出时 会影响布局 1)前段时间作的移动端页面,因为高度只有1页所以用了height:100%;width:100%; ios下点击输入框弹出软键盘时,布局没有大影响. 当输入框可能被软键盘压到时,在一部分安卓下却出了问题,华为自带浏览器和UC会有布局上的问题. 原因可能是因为,软键盘弹出时,改变了height,使height:100%,不能达到原来的高度. 解决办法: $(document).ready(function () { $('body').height($('bod