解决h5底部输入框在ios被软键盘顶飞 软键盘消失还下不来

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

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

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模板 遮罩层

javascript模块

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

转载于:https://www.cnblogs.com/wangfugui/p/10155976.html