android h5输入框被键盘遮挡,APP调用H5开发页面，输入框被软键盘遮挡问题的解决方案...

作者在记录本篇文章之前，也尝试去撸过网上提供的一些其他解决方案，但发现都不好使，于是，自己反复推敲自己的需求，最终找到一条还算可行的解决方案。同时，也借此机会分享给有需要的朋友，希望可以帮助到大家。

首先，提一下作者踩过的大坑，那就是使用resize监听窗口大小的做法，经尝试，发现软键盘弹出是，并不会触发这个监听事件。

另外一种，是可行的解决方案，那就是通过APP本身去处理这个问题，由APP向JS暴露软键盘展开或收缩的方法，H5通过这个暴露的方法判断软键盘的展开和收缩，从而对页面进行相应的渲染。这个方法虽然作者自己没有去尝试过，但应该是可行的。(这里的APP指Android和IOS)

还有一种解决方案，那就是作者自己总结出来的，具体看代码示例吧：

注意：样式要设置滚动属性且高度要大于当前屏幕高度，要不然scrollIntoView将无效

input标签给点击事件和失去焦点事件

(唯一美中不足的就是收起软键盘的时候，需要向下滑动或让input失去焦点才可以回到顶部)

export default {

name: "test",

data(){

return{

}

},

methods: {

//处理键盘覆盖

handleKeyboardCover(type){

if(type == 1){

document.getElementsByClassName('prevent-cover')[0].scrollIntoView();

}else{

document.getElementById('test').scrollIntoView();

}

},

},

}

.test{

height: 20rem;//120%

overflow: auto;

background: #ccc;

margin: 0 auto;

text-align: center;

display: block;

}

.test input{

width: 80%;

height: 40px;

padding: 0 5px;

margin: 0 auto;

border-radius: 5px;

display: block;

margin-top: 20px;

}

结果图如下：(浏览器模拟视图)