wyinhe
wyinhe
  • 发布:2015-09-16 16:04
  • 更新:2019-08-27 15:33
  • 阅读:19428

ios下弹出软键盘后header会随着页面的滚动而消失在顶部

分类:MUI

界面中就一个webview,顶部为一个header,header上有一个搜索框,中间区域为一个列表,用来展示搜索结果,在不弹出软键盘的情况下,不管list中结果再多,上下滑动滚动list内容时header都会固定在顶部,但是点击搜索框弹出软键盘后,再滚动list中的结果时header就会随着页面的向上滚动而从顶部消失。安卓下没问题,就ios有问题,求助,何解?

2015-09-16 16:04 分享
已邀请:

最佳回复

豆腐果lyl

豆腐果lyl

这个问题是已经可以解决了的,不信可以去看mui demo里面的那个聊天程序 im-chat.html

首先说一下为什么会出现这个情况,那是因为ios弹出软键盘的时候,webview的高度没有变化导致超出屏幕范围,而plus这时候又会自动把header的 position:fixed 属性设置为 position:relative,header就跟着滚动了。。。。

解决办法很简单,只要是现在最新版本的plus,都有这个

plus.webview.currentWebview().setStyle({  
    softinputMode: "adjustResize"  // 弹出软键盘时自动改变webview的高度  
});  

只要你在plusready里面写入这个,就可以解决header跟着滚动的问题

==============问题结束分割线===============

虽然楼主可能没遇到,不过也再顺便补充一个:如果页面中包含header、mui-content、footer,当mui-content内容很多,已经可以滚动,这时候弹出键盘,又会出现header可以滚动的情况

这时候已经不是plus的问题了,而是css的问题(ios的坑),而是webview已经改变高度了,但是html、body的高度没有改变。

解决办法就是写一段css样式:

html, body {  
    height: 100%;  
    margin: 0px;  
    padding: 0px;  
    overflow: hidden;  
    -webkit-touch-callout: none;  
    -webkit-user-select: none;  
}  

只要写了这段样式,页面就会随着webview的改变而改变

其实plus、mui框架很好用,只是plus有坑,ios有坑,安卓也有坑,花点时间把坑都踩一遍就没什么问题啦~~

  • 蔡邵鑫

    添加了body 的 height 就没法滚动了

    不添加就是有软键盘的时候输入框飞走了

    有没有兼容的

    2017-11-29 16:44

  • 罗罗诺亚索隆

    没用

    2017-12-18 16:59

  • CodeMenkey

    没有效果

    2018-03-26 23:19

  • 兮颜A

    有人弄好了吗

    2018-04-19 17:02

  • cookie_session@163.com

    设置了 第一段代码出现一个问题就是底部的输入框会跟着弹上去

    2018-06-23 21:55

  • 兮颜A

    这个样式和刷新会冲突,有刷新这个样式就没用了。有人解决了吗?

    2018-07-03 10:17

1043820383@qq.com

1043820383@qq.com

这样修改 键盘弹出就会遮挡住文本框,不会自动定位到输入框

  • 785554043@qq.com

    你好,请问这个问题你有解决办法了吗,我现在碰到这个问题也解决不了

    2017-07-14 17:10

wyinhe

wyinhe (作者)

HBuilder自带的Demo Hello mui中input输入框那个界面也是一样的问题,IOS下弹出软键盘后滚动界面header就会跟着滚动从顶部消失,难道就没人过问了吗???

wyinhe

wyinhe (作者)

问题搞定了,感谢@豆腐果lyl ,但必须加上一点,就是要在mui-content上添加样式overflow: auto; 因此总结说来就是:
1 设置弹出软键盘时自动改变webview的高度

plus.webview.currentWebview().setStyle({  
    softinputMode: "adjustResize"  // 弹出软键盘时自动改变webview的高度  
});  

2 增加样式

html, body {  
    height: 100%;  
    margin: 0px;  
    padding: 0px;  
    overflow: hidden;  
    -webkit-touch-callout: none;  
    -webkit-user-select: none;  
}  

.mui-content {  
    height: 100%;  
    overflow: auto;   
}  

content上必须要有height和overflow样式的控制,否则body上设置的overflow: hidden;会使所有content都无法滚动。
目前看来同一个页面中只要是有需要弹软键盘做输入的输入框和header,在ios下就都会有这个问题,我们程序中好多界面都统一做了上面那样的调整,像这种比较通用的问题,官方可否考虑在框架上统一做一下支持?否则很多类似需求(太普遍了)都会踩到这个坑。

  • 豆腐果lyl

    恩,能解决就好,其实这是IOS上的坑,算不上框架的,那一个网页在ios浏览器上,一般都会出现同样的问题

    2015-09-18 09:47

张先森

张先森

我也遇到了这样的问题,通过你们的方法问题解决了,不过又遇到了别的问题,
我的是个单页面,上面是header,下面是一个随着屏幕滚动(fiexd)的输入框,我要实现的是滚动一定的距离显示返回顶部按钮。
遇到的问题是:
1.监听类名是mui-content的div的scroll事件,在这个事件中获取滚动的距离,试了很多方式都获取不到,最后通过浏览器debug找到了一个方法,e.currentTarget.scrollTop,这个方法可以获取到滚动的距离。(最终用的是document.body.scrollTop || e.detail.y;)

  1. 接下来就是出现了这个问题,点击返回顶部没反应,我是用mui('body>.mui-content').pullRefresh().scrollTo(0, 0, 100);这种方式返回的顶部,最后通过给mui-content这个div设置一个id,在初始化上拉加载,数据加载完之后直接将上拉加载禁止掉。
    虽然上面的问题是解决了,不过又出现了第三个问题了
    3.点击页面下方的输入框,会弹出输入法,将输入法缩回去,整个页面都成白的了,只有头部和最下面的输入框。

最终我是这样做的
页面添加样式

html, body {  
   height: 100%;  
}  
.mui-content {  
    height: 100%;  
}  

初始化上拉加载

mui.init({  
        pullRefresh :{  
            container:"#pullrefresh",  
            up : {  
              contentrefresh : "",//可选,正在加载状态时,上拉加载控件上显示的标题内容  
              contentnomore:'',//可选,请求完毕若没有更多数据时显示的提醒内容;  
              callback :upLoadList //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;  
            }  
        }  
    });  
    function upLoadList(){}  

plusReady之后添加

plus.webview.currentWebview().setStyle({  
    softinputMode: "adjustResize"  // 弹出软键盘时自动改变webview的高度  
});  
//添加这个是因为在安卓上设置自动调整页面高度,滑动的时候会有卡顿的效果  
if(!lm.app.isIOS()){  
    $("html").css("height","auto");  
    $("body").css("height","auto");  
}  

加载完数据禁止掉上拉加载
mui('#pullrefresh').pullRefresh().disablePullupToRefresh();

这是我遇到的问题,有点啰嗦了,希望能帮到大家!

wyinhe

wyinhe (作者)

官方Demo上就存在的问题,难道说这根本就不算是问题?现在有几个页面都有这个情况,真不想把header和content拆成不同的webview,每多拆个webview出来都会带来更多的内存占用。。

  • abc_xf@126.com

    官方demo会有震动。 不好用。 app store下载的可以 但是跑源码就不行

    2019-07-12 11:31

wyinhe

wyinhe (作者)

@豆腐果lyl 您好,感谢回复!试了您提供的方案,还是不行。。

  1. 设置softinputMode: "adjustResize"在list中项很少的时候还有用处,但list中内容稍微多点,比如满屏,再设置这个就无效了。
  2. 加上html, body对应的那段样式之后,list中的内容直接都不能滚动了。当然,把overflow: hidden;去了后就能滚动,但去了之后这段样式类加不加都没区别了,header还是一样跟着从顶部滚动消失。。
blucee

blucee

这是个大坑

254090199@qq.com

254090199@qq.com

我来回复一下,谢谢题主给出的解决方案,同时之前我也从另外一个类似问题的回复中得到一些线索,但就是不懂得用,看到题主的解决方案,我终于把那个线索给试出来了
线索地址:http://ask.dcloud.net.cn/question/6833 ,里面的第八楼,回复1中有人给出答案了

首先题主给的那些代码和CSS用上去了,不会导致页面错位,但有一个也很要命的问题就是,软键盘弹出来以后,会把底下的输入框给覆盖掉,必须手动划到底下才能看到文本框,我现在给出我的解决方案

这个方案只需要CSS,不但完美解决错位问题,还可以解决软键盘弹上去后的文本框定位问题

html,
body {
height: 100%;
margin: 1px 0 0 0;
}

  • Native_O

    没有用,或许每个人的情况不一样吧

    2018-01-25 20:42

heartvip

heartvip

有他一个问题问大神们,我设置html和body的样式为overflow:hidden,再设置内容区overflow:auto,我的内容区有一个可滚动的div,我发现软键盘弹起再落下后我的div就不可滚动了,这是为什么?

505744817@qq.com
青麻

青麻 - 付费咨询指导,可接私活,qq1481983952,论坛帖子不一定回复,论坛私信不回,有需要请加QQ。

Mark一下

菜鸡

菜鸡

看我个人中心文章

522908078@qq.com

522908078@qq.com

按照大家说的配置 还是不生效啊

DCloud_heavensoft

DCloud_heavensoft

使用原生导航栏,最简单的方案。

要回复问题请先登录注册