手机网页，输入时 软键盘盖住输入框完整解决方案，兼容安卓、鸿蒙、苹果IOS

 手机网页，输入时 软键盘盖住输入框完整解决方案，兼容安卓、鸿蒙、苹果IOS

当点击输入框时调起软盘，安卓和IOS会有所不同，IOS中弹起软盘会让整体布局往上移，而安卓不会而是整体布局高度缩减了。

参考了2篇文章

 文章1：

移动端键盘挡住输入框_chueluo0880的博客-CSDN博客

文章2：

移动端软盘遮盖输入框的解决方案_Zdde_的博客-CSDN博客_移动端软键盘遮挡输入框

 他们的思路大致是一致的，我这里采用了文章1的思路；大致思路如下：

解决思路与实现

步骤1：打开页面后，先获取当前窗体高度

var winHeight = window.innerHeight; // 获取当前页面高度

步骤2：声明一个全局dom变量，来存储当前获取光标的输入框id

我这里给了一个默认值

var indexDomId='name';//当前DomID 

步骤3：输入框dom绑定获取光标事件，并传当前输入框的ID值

html代码

<el-form-item label="姓名" prop="Name">
  <el-input v-model="UserApplyForm.Name" id="Name" @focus="Domonfocus('Name')">el-input>
el-form-item>

JS代码：用来缓存输入框ID

function Domonfocus(name)
{
  console.log(name)
  indexDomId=name;
},

步骤4：监听窗口尺寸改变

    window.onresize = function(){
    //监听到窗口大小改变后执行相关业务
    
    };//

步骤5：监听到窗口尺寸改变后，延时500毫秒后让窗体滚动到光标所在位置

这里说下为什么500毫秒后再执行

因为需要等待【步骤3】的业务执行完成

    window.onresize = function(){
     //获取窗体改变后的高度
    var onresizeH=window.innerHeight;
    //页面打开时的高度“减去”窗体改变后的高度
    var _h=winHeight - resizeHeight;
    if (_h>50)
    {
    // 软键盘弹出-----等待500毫秒后，滚动至光标所在位置
    setTimeout(function(){document.getElementById(indexDomId).scrollIntoView(true);},500);
    
    } 
    else {
    //软键盘收起-----等待500毫秒后，滚动至光标所在位置
    setTimeout(function(){document.getElementById(indexDomId).scrollIntoView(true);},500);
    }
    };//