移動端ios 輸入框fixed固定在底部 焦點時亂跳加遮蓋問題的解決 轉自zhangyunling 加個人專案解決方案
如果您有過移動端的開發經驗，那麼您是否碰到過這樣的問題，一個頁面有輸入框，當這個輸入框聚焦時，輸入框在IOS下，被移動到手機螢幕的當中去了，而在Android端，有些瀏覽器的輸入框，會被鍵盤蓋住。
1：前言
接下來就以最常見的頂部和底部固定輸入框來看一下，問題的來源，以及折中的解決方案
輸入區域，在移動端基本上，只用於三種情況
1：固定在頂部的
2：固定在底部的
3：在文件流中的
我們這裡，首先以固定在頂部和底部的為例，來看看它的一些表現。
而這裡的問題展示，也是通過一些示例來展示，而在每個示例中，都是使用的最簡單的元素，最簡單的佈局，來展示這個問題
2：文件高度沒有超過一屏
大部分的頂部輸入框，出現的情況都是不會超過一屏的，如果超過一屏，那麼大部分的處理方式就是，這個頂部的輸入框是在文件流內部的，不是一直固定在頁面頂部的，而當輸入框點選之後，直接跳轉到一個單獨的搜尋頁，而搜尋頁的內容，一般都是不太多的，基本只包含一些提示資訊，並且，在搜尋頁的輸入框，也不是那種固定在頂部的。就比如流量那麼大的“淘寶的H5頁面”;
這裡加一句題外話，其實在移動端的佈局中，已經很少有區域性是固定佈局的了，尤其是一些不常用的功能，原因可以想象為，移動端的可視區域就那麼一些，如果很多元素採用了固定佈局，那麼有效的內容元素，可以展現的就更少了，所以一般除非必要，是不會出現固定佈局這樣的情況的？
扯了那麼多，接下來就先看看示例吧
如果您在PC端，想要移動端測試一下，請掃碼：
如果您在移動端，或者在PC端，想要看下原始碼：滾動區域，不大於一屏的DEMO
我個人有在IOS下，和Android下測試一下，結果如下：
上輸入框，在IOS和Android下，都正常
下輸入框，在IOS下，會彈到鍵盤上面，雖不是緊挨著鍵盤，但是情況可以接受。
下輸入框，在Android的某些瀏覽器下，會被蓋住，在大部分瀏覽器下，都是緊挨著鍵盤的
3：文件高度超過一屏
有時候，會有這麼一種情況，我固定在頂部和底部的輸入框，就是需要在一個很大的頁面中，有一個固定在頂部或者是底部的輸入框，比如一些實時聊天的介面，或者是彈幕互動的介面。
但是呢，除了這些固定之後，其他的一些元素，是佔據了很大文件空間的，就是說，其他的元素高度，是超過一屏的高度的，所以來看看這個時候的情況：
如果您在PC端，想要移動端測試一下，請掃碼：
如果您在移動端，或者在PC端，想要看下原始碼：滾動區域，大於一屏的DEMO。
該情況，如果您是Android機的話，這裡可以不做測試，因為其展示形式，和文件不超過一屏的展示形式，基本一樣的，該出什麼問題，還是有什麼問題，這裡主要是IOS下的問題，而且問題非常嚴重。
如果您沒有發現問題，那麼就把頁面滾動到最底部的時候，點選頂部的輸入框，把頁面滾動到最頂部的時候，點選固定在底部的輸入框，就可以看到問題了。
我看到的結果，可以描述如下：
Android：上輸入框表現正常，下輸入框：相同的問題，有的表現正常，有的會被鍵盤蓋住
IOS下：上輸入框，會把body的滾動區域，整體滾動到最上面，導致錯位
IOS下：下輸入框，會把body的滾動區域，整體滾動到最下面，導致錯位
當body的區域，大於一屏時，基本IOS下的輸入框上下固定，是不可用的
4：小結
我們來總結一下，上面兩個示例的情況：
1：輸入框是固定在頂部和底部的，使用的是fixed的
2：其他的內容區域是普通文件流，文件高度試了兩種：不超過一屏和超過一屏
這裡因為是給的最簡單的示例，那麼就代表著，基本不會受到其他屬性的影響，那麼問題就來了：
首先，輸入框固定在頂部和底部，使用fixed是沒有問題的，不然無法固定，也不能實時的去計算，而且在IOS下，當頁面在滾動的時候，為了有更好的滾動體驗，是停止CSS渲染和JS的執行的，所以也不能實時的去計算，然後進行固定，所以使用fixed的固定，是必須要使用的。
那麼，問題就只剩下兩個了：
1：內容區域是普通文件流
2：內如區域的高度，超過一屏
就這兩個問題，我們前面已經看到了一種情況，就是當文件不超過一屏時，在IOS和Android下的表現效果，還是可以接受了，除了在Android的某些瀏覽器下，底部輸入框會被鍵盤蓋住之外，並沒有其他的不好的效果，尤其是頂部輸入框，都是可以完美的使用。
所以，這裡的問題解決方案，就只剩下了一個，那麼就是控制高度最多顯示為一屏的內容，這個也是我認為的，一個不錯的解決方案，移動端單屏佈局方式。
雖然是單屏，但是內容區域，總不能限制為一點點內容了，所以，這裡剩下的解決方案，就只剩下了一種，內容區域也使用固定佈局
重新多新增一層div，該元素把所有非固定佈局的元素包含在內（固定佈局的不要包含，有問題的，這個在之後再寫一篇文章，來說明這個問題）。讓這個div佔據螢幕的可視區域，但是，又不讓這個區域超出一屏的內容。所有的非固定元素，都在該div內部滾動，那麼接下來，就看看效果如何吧。
5：單屏佈局方式–解決方案
其主要的HTML和CSS如下：
<div class="input-top">
<input class = "input" type = "text" placeholder = "頂部輸入框" />
</div>
<div class="input-bottom">
<input class = "input" type = "text" placeholder = "底部輸入框" />
</div>
<div class="wrapper">
該元素區域，佔據很大的高度
</div>
.wrapper{
position:absolute;
top:30px;
left:0px;
right:0px;
bottom:30px;
overflow:auto;
-webkit-overflow-scrolling : touch;
}
檢視示例效果：
如果您在PC端，想要移動端測試一下，請掃碼：
如果您在移動端，或者在PC端，想要看下原始碼：單屏佈局方式-解決上下輸入框固定在頂部和底部的DEMO
表現效果：
Android：上輸入框表現正常，下輸入框：相同的問題，有的表現正常，有的會被鍵盤蓋住(會出現該情況的手機，佔據少數，而且跟瀏覽器相關)
IOS下：上輸入框表現正常
IOS下，下輸入框會彈到鍵盤上面，雖不是緊挨著鍵盤，但是情況可以接受。
所以這種情況下，是可以使用的，最好再把Android下的問題，解決一下，那麼該方法，將是固定輸入框的最佳解決方案了
Android的手機，表現形式依然和前面的兩個示例，基本一致。
主要還是看IOS的表現了，從示例中，可以看到，表現與第一個示例，表現差不多，原因在於，它就是屬於第一種的情況，文件高度，是低於一屏的。其表現形式也是很給力，頂部輸入框，可以完美的解決，底部輸入框稍微跳動，不過可以接受。
如果您使用這種佈局，而且需要的是頂部輸入框固定的話，而且又不能跳轉新頁來實現該方法的話，那麼單頁佈局方式，將會非常有效，所以請考慮。
6：輸入框在普通流中
單頁佈局，只適用於，需要固定佈局的時候，其他的時候，還是使用普通流佈局為好，畢竟越普遍的東西，其相容性會越好，雖然理論上，單頁佈局，不會出現其他的問題，但是誰又能保證一些瀏覽器，會被使用者，改成什麼樣子呢。
而固定佈局，其實也主要是為了解決IOS端的問題，對於Android端的，其實大可以直接使用普通佈局來實現的，只是如果寫兩套的話，也有些麻煩的。
那麼我們再來看看，輸入框在普通文件流內部時的情況吧：
這個情況，在我看來，應用場景，是比前面固定佈局的應用場景多的。該部分的內容，本篇就不做說明，因為雖然有些想法，但當前這些想法並沒有在實際中應用過，也沒有測試過一些機型，沒有經過驗證的東西，說出來就會變得有些不負責任了。
待我之後在專案中，以專案為試驗物件，總結研究過之後，再來說說普通流中，輸入框在Android下的一些易髮狀況，以及處理方式。
總結
這位博主寫的很詳細但是還有些問題 ipone中第一次焦點時軟鍵盤會遮住部分輸入框，
使用焦點時
interval = setInterval(function() {
document.body.scrollTop = document.body.scrollHeight
}, 100);
失去焦點取消
clearInterval(interval); 可以解決遮住的問題