移動web聊天頁面熊咽，輸入框在底部的時候铣除，點擊輸入，彈起軟鍵盤烘嘱，iOS在將頁面推上的時候會回彈一下昆禽，導致鍵盤剛好遮擋到輸入框。而且在頁面不同高度彈起的鍵盤對輸入框的位置還不一樣蝇庭。（所受影響的元素此時是fixed定位）醉鳖。在ios中此問題是很難解決。
1. 當換起鍵盤的時候把輸入框的fixed定位改為relative定位到頁面的底部哮内，當輸入完成離開輸入框的時候盗棵，再把輸入框的定位改為fixed。這樣不會引起輸入框的位置不可控北发。處理較為簡單纹因。
觸發(fā)留言之前的界面.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更新:
在組件化開發(fā)的情況下，固定定位的輸入框的樣式要與本身html相對應批什。今天發(fā)現(xiàn)當把定位的標簽的代碼移動到主體的html中农曲，原來的樣式還在原組件中會導致聚焦的時候還是會消失不見社搅。
