移动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的元素（输入框）。这样每次弹起也不会造成输入框乱跳，并且每次弹起的位置是在点击的位置。
<body>
<div class='warper'>
<div class='content'></div>
<div>
<div class="fix-bottom"></div>
</body>
// 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中，原来的样式还在原组件中会导致聚焦的时候还是会消失不见。
