真二
真二
  • 发布:2014-10-22 15:08
  • 更新:2018-07-12 11:36
  • 阅读:6030

点输入框,android输入法闪退,ios错位问题

分类:HTML5+

问题:输入框固定在页面的底部
在android中,如果页面没有滚动条,或者在有滚动条而滚动到最底部时,点击输入框,输入法闪退
andrrid设备:红米 android版本4.3JXS36C miui版本MIUI-4.8.6
在ios中,在页面用fixed固定定位的元素都会跑动,如下图
ios设备:iphone5 ,ios版本7.0.2

固定底部的输入框跑离输入法,固定头部的层被滚动到上面去

我在hello mui中把输入框定位底部,会有同样的问题。
代码:

<body>
<header class="detailpage_head">
<a class="back" onclick="closeview();"></a>
<h1 class="title">评论</h1>
</header>
<div>

    <div id="con" class="main"></div>  

    <div id="comment" class="comment">  
        <div style="text-align: center;martin-top:20px">  
            <img width="60" height="60" src="../img/icon-load.gif" />   
        </div>  
    </div>  
</div>  

<div class="replay">  

    <textarea class='replaycon' id='repcon' name="repcon"  
        rows="1" cols="1">我要评论...</textarea>  
    <div class="btn_rep_div">  
        <input class="btn_rep" id="btn_reply" onclick="doreply()" value="" />   
        <!--<div class="btn_rep" id='btn_reply' onclick="doreply()"></div>-->  
    </div>  
</div>  

</body>

相关样式:

.detailpage_head {
position: fixed;
width:100%;
top: 0;
left: 0;
z-index: 10;
height: 54px;
padding-right: 10px;
padding-left: 10px;
padding-top: 7px;
padding-bottom: 7px;
background-color: #00897b;
border-bottom: 0;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .85);
box-shadow: 0 0 1px rgba(0, 0, 0, .85);

-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/其它详细页头部返回按钮 高度54px/
.detailpage_head .back{
float: left;
display: inline-block;
width:40px;
height:40px;
background-image: url('../img/icon-back.png');
}
.detailpage_head .title{
z-index: -1;
position: absolute;
display: block;
width: 100%;
padding: 0;
margin: 0 -10px;
font-size: 24px;
font-weight: 500;
line-height: 44px;
color: #fff;
text-align: center;
white-space: nowrap;
}

.replay{
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
min-height :48px;
background-color: #00897b;
}
.replaycon{
min-height: 48px;
width:85%;
background-color: #00897b;
border-style: none;
color : #ccc;
line-height: 20px;
font-size:18px;
overflow-y: hidden;
text-align: left;
margin: 0;
border-radius: 0;
outline: 0;
line-height: 24px;
word-wrap: break-word;
overflow-x: hidden;
overflow-y: auto;
float:left;
}
.nullcolor{
color : #ccc;
}
.unnullcolor{
color : #fff;
}
.btn_rep_div{
position: absolute;
bottom: 0;
right: 0;
width:15%;
height:48px;
line-height:48px;
text-align: right;
}
.btn_rep{
border-style: none;
margin-top: 8px;
width:32px;
height:32px;
background-color: #00897b;
background-image: url('../img/icon-reply.png');
background-repeat: none;
margin-right:10px;
}

2014-10-22 15:08 负责人:无 分享
已邀请:
木乃森

木乃森

需要把这种问题顶起来

Luyc

Luyc

求解啊

wenju

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

解决了没 IOS的输入框貌似不兼容position: fixed; bottom: 0;

wenju

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

自己用iscroll解决了~~(>_<)~~

DC_Jason

DC_Jason

请问这个问题怎么解决, 我现在也是这样 ,固定定位都不行。

5***@qq.com

5***@qq.com

大神,恕我 愚昧,能给个直接的代码? 源码 这个 我一直看不懂啊

1***@qq.com

1***@qq.com - 前端开发

我现在也遇到了, 求解;我遇到的具体问题是用苹果自带的键盘没有问题,用第三方键盘就会失效和遮挡。

DCloud_UNI_FXY

DCloud_UNI_FXY

ios的fixed定位在键盘弹出时,是有bug的
三个方案

1.弹出时,动态调整fixed定位为static或者absolute

  1. 使用双webview,把fixed定位放到单独的webview里(通常是顶部或底部fixed)
  2. 使用scroll控件,不用fixed定位
  • DC_Jason

    第一种弹出时动态调整,是不是在获取焦点的时候?

    2016-03-07 17:30

  • DCloud_UNI_FXY

    回复 DC_Jason:对。focusin和focusout

    2016-03-07 17:31

  • DC_Jason

    回复 DCloud_UNI_FXY:好的,我试试!谢谢

    2016-03-07 17:38

  • DC_Jason

    Search.focusin = function(){

    this.style.position = 'static';

    };

    这样不行啊!ios还是会跑@21568:

    2016-03-07 17:48

  • DCloud_UNI_FXY

    回复 DC_Jason:chrome调试,参考mui源码中的mui.fixed.keyborad.js

    2016-03-07 17:50

  • 5***@qq.com

    大神,恕我 愚昧,能给个直接的代码? 源码 这个 我一直看不懂啊

    2016-11-25 17:22

  • 5***@qq.com

    应该在页面添加 什么类名?

    2016-11-25 17:23

  • 5***@qq.com

    或者说怎么调用.fixed.keyborad.js

    2016-11-25 17:23

大前端小王子

大前端小王子 - 软件开发工程师

这个问题怎么解决呢?安卓软键盘闪退

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