ionic cordova 软键盘遮挡input表单焦点解决方案

业务需求

在ionic4 开发的android环境下想完成一个软键盘打开，选中的input输入框不要被遮挡功能。

解决思路

步骤1：监听软键盘打开和关闭的状态，并拿到软键盘的高度
步骤2：通过事件捕获机制获取当前input距离可视窗口的距离，判断可视窗口大小
步骤3：求得input与可视窗口底部的距离，判断是否为软键盘遮挡元素
步骤4：通过 js 设置 css 平移，将 input 的最外层dom节点偏移一个软键盘高度
步骤5：将软键盘关闭时，css 平移恢复。

实现代码

 private bottomDistance = null; //底部距离
 private keyboardHeight = 0;


//对整个window的焦点进行监听，通过事件捕获拿到当前input节点
window.addEventListener('focus', function(e){
    if(e.target['localName'] == 'input'){  //只有状态为input才进行计算
    	//窗体高度
        let winHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; 
        //input元素距离可视区域的上方高度
        let top = e['path'][0].getBoundingClientRect().top; 
         //计算出元素距离底部的高度
        _this.bottomDistance = winHeight - top;
    }else{
      _this.bottomDistance = null;
    }
    }, true)
	//对软键盘进行监听，打开走此方法
    window.addEventListener('native.keyboardshow', function (e) {
      //获取软键盘高度
      _this.keyboardHeight = e['keyboardHeight'];
      //底部高度 低于 软键盘高度则进行整体dom向上偏移
      if(_this.bottomDistance < _this.keyboardHeight){
        //获取到当前 input 父级最外层的大 dom 节点元素
        let dom = document.getElementsByClassName('zhfxbody')[0]; 
        let tempHeight = _this.keyboardHeight - 30;
        //设置 dom 的 css，偏移
        dom.setAttribute('style', 'transform:translateY(-' + tempHeight + 'px)');
      }
    });
	//对软键盘进行监听，关闭走此方法
    window.addEventListener('native.keyboardhide', function (e) {
      if(_this.keyboardHeight){
        let dom = document.getElementsByClassName('zhfxbody')[0];
        dom.setAttribute('style', 'transform:translateY(0px)');
        _this.bottomDistance = null;
        _this.keyboardHeight = 0;
      }
    });