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

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

触发留言之前的界面.jpg

换起输入框之后的界面.jpg
代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
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的元素（输入框）。这样每次弹起也不会造成输入框乱跳，并且每次弹起的位置是在点击的位置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<body>
     <div class='warper'>
         <div class='content'></div>
     <div>
     <div class="fix-bottom"></div>
</body>

<style>
    .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%;
    }
</style>