h5底部输入框在ios被软键盘顶飞的问题

好吧,其实不是顶飞,准确点说应该是h5页面fiexed定位在底部的输入框在ios软键盘弹起的时候软键盘跟输入框有时会有一段悬空的距离,无法紧贴。在安卓机子上则没有这样的情况。
解决方法是通过h5的scrollIntoView去实现。scrollIntoView()可以在所有的HTML元素上调用,在滚动浏览器窗口,或者窗口发生变化时,可以调用该方法让元素出现在视窗中。(本文的例子就是软键盘的弹出改变了窗口的高度)
该方法不传参数或者传入true可以让元素与视窗顶部齐平,如果传入false调用元素会尽可能全部出现在视口中,(可能的话,调用元素的底部会与视口顶部平齐。)

具体代码如下,用一个全局的定时器变量改变input框的状态,在input框点击或聚焦时触发该定时器,失焦则清除定时器(这里用vue事件作为例子)
template模板

<input @click="viewAll" @blur="viewDefault"  ref="replyInput" type="text"  />

javascript模块

var inputTimer = null;

viewAll: function(){
    this.inputTimer = setInterval( () => {
        this.$refs.replyInput.scrollIntoView(false);
    },100);
},
viewDefault: function(){
    clearInterval(this.inputTimer);
}

这个问题解决完呢,通常输入框弹起的时候我们会给背景加个遮罩层,同时也不想背景滑动,这时候单单给body添加overflow hidden是不够的,主要是ios的机子上无法兼容,so这时候最好还是给蒙板跟你的输入框区域加上个touchmove事件,来去掉touchmove的默认事件。如
template模板 遮罩层

<div  @touchmove="stopMove($event)" class="view-mask">  
</div>

javascript模块

stopMove: function(e){
    e.preventDefault();
}

附上最近发现的另一个解决方案 http://efe.baidu.com/blog/mobile-fixed-layout/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,242评论 25 708
  • 1.之前做微信公众号时发现每次调用键盘输入的时候输入框就被盖着,让人有点烦,于是研究了一番,有了点下面的收获,解决...
    倘浩洋阅读 9,700评论 0 3
  • 摇滚仅仅是一种音乐形态吗? 不! 摇滚是一种精神,摇滚是一种文化,摇滚是一种思想的颠覆形式,摇滚是一种人生态度和哲...
    音曼实验室阅读 269评论 0 0
  • 随意斜披着校服的少年一如既往地走在回家的路上,蓬乱头发下耷着的斜刘海却遮不住他眼睛里的烦躁,急促而又不走直线的脚步...
    Sheldon黄阅读 338评论 0 1
  • 刘溪,远大住工国际;国学践行23期学员,24期奉献者,六项精进299期同修【知~学习》 【日精进第2天】 《六项精...
    西西_3e45阅读 245评论 0 1