成都H5
成都H5
  • 发布:2016-08-22 10:41
  • 更新:2018-06-11 16:40
  • 阅读:7473

IOS 绝对定位 固定在底部 点击输入框的时候 不往上移 被键盘遮着了 但是安卓可以

分类:HTML5+

footer {
position: fixed;
width: 100%;
height: auto;
min-height: auto;
border-top: solid 1px #bbb;
left: 0px;
bottom: 0px;
/overflow: hidden;/
padding: 0px 50px;
background-color: #00BFFF;
display: block;
}

<footer class="comment">
<div class="mui-input-row">
<label class="mui-icon mui-icon-compose"></label>
<!--<div class="reply" id="reply" placeholder="期待你的神评论" contenteditable="true"/></div> -->
<div class="reply" id="reply" placeholder="期待你的神评论" contenteditable="true"></div>
<!--<input type="text" class="reply" id="reply" placeholder="期待你的神评论" />-->
<!--<input type="text" class="reply" placeholder="期待你的神评论" />-->
</div>
<div class="mui-input-row" id="butt">
<a class=" mui-icon iconfont icon-biaoqing"></a>
<a class="mui-btn send mui-btn-primary mui-pull-right">发送</a>
<div id="Gallery" class="mui-slider" style="margin-top:4.7%;">
<div class="mui-slider-group">
<div class="mui-slider-item"></div>

				</div>  
				<div class="mui-slider-indicator">  
					<div class="mui-indicator mui-active"></div>  
				</div>  
			</div>  
		</div>  
	  
	</footer>
2016-08-22 10:41 负责人:无 分享
已邀请:
Yizhiyu

Yizhiyu - 前端

同问这个问题。我的是没被遮住连上面的导航都直接顶出去了,IOS真的麻烦

Yizhiyu

Yizhiyu - 前端

我发现IOS的输入法弹出来时会使固定定位失效,这应该是问题主要原因,不知道怎么解决

张一三

张一三

在ios上,当底部有fixed型输入框时,同时把内容列表也设置为fixed {position: fixed;top:0px;right:0px;left: 0px;bottom: 0px;}

张一三

张一三

在ios上,当底部有fixed型输入框时,

1、同时把内容列表也设置为fixed {position: fixed;top:0px;right:0px;left: 0px;bottom: 0px;}

2、

/**  
 * 可选值 : “adjustPan”-默认值-弹出软键盘时Webview窗口自动上移,以保证当前输入框可见;  
 * “adjustResize”-自动调整Webview窗口大小(屏幕区域减去软键盘区域),同时自动滚动Webview保证输入框可见。  
 * */  
设置窗口的style   
softinputMode:"adjustResize"
  • Yizhiyu

    那怎么能实现微信那样弹出软键盘时把输入框固定在内容的最下方呢


    2018-04-30 17:09

  • Yizhiyu

    而且内容列表固定定位就无法滚动了


    2018-04-30 17:15

  • 张一三

    输入框的footer容器也设置为fixed到底部。

    列表当然可以滚动,用div的overflowX = 'hidden',overflowY = 'auto'。

    有些bug的解决必然要牺牲部分性能!不然在ios上底部输入框体验更差!


    2018-04-30 20:40

  • 张一三

    	/**  
    * 在ios为解决输入法bug,将#content设为了fixed,所以此处需判断ios
    * */
    if (inc.isIOS()) {
    setInterval(function(){
    inc.windowScroll({eleId:'#content'},function(s){
    //inc.consoleLog( 'inc.' + inc.printObj(s) );
    if (s.scrollBottom === 0 && s.scrollTop !== 0) {
    if (pub.isPullUpDisable === false) {
    commentList();
    }
    }
    });
    },100);
    } else {
    //监听窗口滚动到底部事件
    document.addEventListener("plusscrollbottom", function(e) {
    if (document.body.scrollTop !== 0) {
    if (pub.isPullUpDisable === false) {
    commentList();
    }
    }
    }, false);
    }

    2018-04-30 20:41

  • 张一三

    如果你有好的解决方法,切勿忘了在此帖下告知解决方法!谢谢!另外还有一个思路,就是底部输入框单独用一个webview,该webview根据输入内容的高度也随时变更高度。这方法我没用过,仅给你提供思路!


    2018-04-30 20:45

  • 张一三

    还有一点,下面是官方推荐用的!我用了没有感觉到什么明显优化效果!不过我还是在添加在代码中了!

    /**



    • 指定底部停靠区域(通常是底部Tab栏)进行优化修复抖动效果,高度值为底部停靠区域的高度

    • */

      plus.webview.currentWebview().setFixBottom(50);


    2018-04-30 20:48

5***@qq.com

5***@qq.com

大兄弟 这个问题解决了么,

wenju

wenju - https://www.mescroll.com -- 精致的下拉刷新和上拉加载组件

@张一三 确实有效果 感谢分享 帮了大忙

该问题目前已经被锁定, 无法添加新回复