ios端 input輸入框遮擋問題解決

ios端輸入框遮擋問題很煩人 記錄自己的解決辦法

問題: 整體頁面布局全都是flex 但是在ios中使用原生輸入法顯示正常 使用第三方輸入法就會出現遮擋 

解決:獲取焦點添加 父元素 transform: translateY(0%);  

原理:我不知道  developer.mozilla.org 我這里一直打不開 有空再補上好了

<div class='detail'>
    <div class='message' #message [style.height.rem]='height'>
       內容區域        
    </div>
    <div class="input-box" #input>//輸入框
        <input type="text" class='input' [(ngModel)]='inputContent' (focus)='inputFocus()' (blur)='inputBlur()'>
        <div class="btn">發送</div>
    </div>
</div>

:host {
  flex: 1;
}

.detail {
  height: 100%;
  display: flex;
  flex-direction: column;
 
........ 

 .input-box {
    height: 1.3rem;
    &.move {
      -webkit-transform: translateY(0%);
              transform: translateY(0%);
    }
    .input {
     ...
    }
    .btn {
      ....
    }
  }
}

}

/**
     * 失去焦點  失去焦點添加樣式  
     */
    inputBlur() {

        if (Utils.isFromiOS()) {
            console.log(222);
            this.renderer.removeClass(this.input.nativeElement, 'move');
        }
    }

    /**
     * 獲取焦點
     */
    inputFocus() {
        if (Utils.isFromiOS()) {
            console.log(222);
            this.renderer.addClass(this.input.nativeElement, 'move');
        }
    }