作者在记录本篇文章之前，也尝试去撸过网上提供的一些其他解决方案，但发现都不好使，于是，自己反复推敲自己的需求，最终找到一条还算可行的解决方案。同时，也借此机会分享给有需要的朋友，希望可以帮助到大家。
首先，提一下作者踩过的大坑，那就是使用resize监听窗口大小的做法，经尝试，发现软键盘弹出是，并不会触发这个监听事件。
另外一种，是可行的解决方案，那就是通过APP本身去处理这个问题，由APP向JS暴露软键盘展开或收缩的方法，H5通过这个暴露的方法判断软键盘的展开和收缩，从而对页面进行相应的渲染。这个方法虽然作者自己没有去尝试过，但应该是可行的。（这里的APP指Android和IOS）
还有一种解决方案，那就是作者自己总结出来的，具体看代码示例吧：
注意：样式要设置滚动属性且高度要大于当前屏幕高度，要不然scrollIntoView将无效
input标签给点击事件和失去焦点事件
（唯一美中不足的就是收起软键盘的时候，需要向下滑动或让input失去焦点才可以回到顶部）
<template>
<div id="test" class="test">
<!-- 测试案例 -->
<input placeholder="请输入测试内容1">
<input placeholder="请输入测试内容2">
<input placeholder="请输入测试内容3">
<input placeholder="请输入测试内容4">
<input placeholder="请输入测试内容5">
<input class="prevent-cover" placeholder="请输入测试内容6" @click="handleKeyboardCover(1)" @blur="handleKeyboardCover(2)">
</div>
</template>
<script>
export default {
name: "test",
data(){
return{
}
},
methods: {
//处理键盘覆盖
handleKeyboardCover(type){
if(type == 1){
document.getElementsByClassName('prevent-cover')[0].scrollIntoView();
}else{
document.getElementById('test').scrollIntoView();
}
},
},
}
</script>
<style scoped>
.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;
}
</style>结果图如下：（浏览器模拟视图）
