iOS web html5 移动端 软键盘弹起遮挡输入框 输入框定位不准确

移动web聊天页面，输入框在底部的时候，点击输入，弹起软键盘，iOS在将页面推上的时候会回弹一下，导致键盘刚好遮挡到输入框。而且在页面不同高度弹起的键盘对输入框的位置还不一样。（所受影响的元素此时是fixed定位）。在ios中此问题是很难解决。

1. 当换起键盘的时候把输入框的fixed定位改为relative定位到页面的底部，当输入完成离开输入框的时候，再把输入框的定位改为fixed。这样不会引起输入框的位置不可控。处理较为简单。

触发留言之前的界面.jpg

换起输入框之后的界面.jpg

代码如下：

if(isiOS){
        $(document).on("focusin",function(){
            // $('.postMsgBg') 输入框
            $('.postMsgBg').css('position','relative')
            var clientHeight= document.body.clientHeight;
            setTimeout(function(){
                $(window).scrollTop(clientHeight);
            },300);
        });
        $(document).on('focusout', function () {
             $('.postMsgBg').css('position','fixed')
        });
    };

以上的方法是可以解决弹起键盘后输入框乱跳的问题，但是每次都会跳到屏幕的最下方，这样会比较突兀，相对体验不是很友好。

2. 在body下面新建一个具有absolute属性的元素，将页面所有的模块放在此元素中。在此元素的同级新建一个定位为fixed的元素（输入框）。这样每次弹起也不会造成输入框乱跳，并且每次弹起的位置是在点击的位置。

 
     

         

     

     

 
// css
.warper{
      position: absolute;
      width: 100%;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;/* 解决ios滑动不流畅问题 */
 }
.fix-bottom{
     position:fixed;
     bottom:0;
     width: 100%;
}

2018-6-5更新:
在组件化开发的情况下，固定定位的输入框的样式要与本身html相对应。今天发现当把定位的标签的代码移动到主体的html中，原来的样式还在原组件中会导致聚焦的时候还是会消失不见。