h5實現輸入框fixed定位在螢幕最底部相容性

1、問題由來

做h5 已經有很長一段時間了，現在做的工作h5比pc上的更多，曾經解決pc端ie各個版本的相容性也是傷透腦筋，原以為h5的會更好，殊不知，還有更頭疼的問題，當設計師要設計乙個聊天視窗，把輸入框定位在最底部，這是再常見不過的問題了吧，舉例：

上圖就是我最近做的乙個功能，原以為是很簡單的乙個定位功能，但是沒想到牛逼的測試居然用各種iphone，各種安卓，各種瀏覽器（qq瀏覽器、safari、opera等瀏覽器），各種輸入法（系統自帶、搜狗輸入法），測出來一大堆問題，最後經過千辛萬苦，終於做到了能大致相容。

2、初步解決

1）、結構布局於第一次解決

//1部分css

2.header 6//

2部分7

.body

11//

3部分12

.footer

1
<
div 
class
="header"
id="header"
>會話問診
div>
2<
div 
class
="body"
id="body"
>
div>
3<
div 
class
="footer"
id="footer"
>
4<
input 
type
="text"
id="input"
>
5div
>

1 $('.body').css('height', $(window).height() - 39); 
2 $('#input').on('focus', function
() , 200);
6  });

這種布局方法就讓中間".body"中的內容在".body"中滾動，對整個html中的body產生了1px的滾動，此處滾動的目的是為了執行"window.scrollto(0, 1000000);",經過測試，若body沒有產生滾動，則這個方法是不會執行的。

相信很多人都會以以上的方法解決input在彈出鍵盤時候的問題，當鍵盤彈出來後，就讓滾動條一直往下面滾直到滾動到最下面，沒錯，這種措施之後能保證大部分的正常，但是在safari瀏覽器中就出現了問題，由於safari瀏覽器下部有一塊

圖中是safari瀏覽器自帶的一塊標籤，當使用以上滾動時，你會發現，他雖然是滾動上去了，但是也會出現一塊空白，沒錯，相當於給你的感覺是滾動上去過多，那麼此時，也會被測試打回，是不是感覺很傷心無助，（safari瀏覽器把下面那塊當作了body的東西，他自己實現了一塊，把我們的html內容裝在了他自己實現的容器裡面）

2）、進一步解決

1 $('input').on('focus', function
()  else 
9             }, 200);
10 });

3)、再次優化與解決

經過以上幾步驟，原以為完美無缺的解決方案，可以達到很好的相容了，可是意外又發生了，測試們用了搜狗輸入法來做測試，問題又來了，蘋果手機自帶的輸入法的實現是把body擠上去，搜狗則是在得到focus之後，直接彈出的一塊遮罩層，這就導致了問題，此時我們的輸入框被擋在了輸入法之後，因此又增加了下面的判斷與處理，

1 $('input').on('focus', function
() 9                 } else 
12             }, 200);
13 });

3、解決經過幾次測試，看似幾乎沒問題，最後又在iphone5上面的qq瀏覽器中用搜狗輸入法又測試出了問題，它在第一次點選當input獲取到第一次focus事件的時候，window執行了scrollto方法，第二次，他不再執行，不難發現，系統是以為已經滾動到了下方，因此便不再執行，那麼我又增加了乙個事件

$('input').on('blur', function
() );

終於大功告成，基本上解決了現在普遍瀏覽器中大部分搜狗和自帶輸入法對模擬fix的input定位問題。

總結最後解決js為：

1 $('input').on('focus', function
() 10                 } else 
13             }, 200);
14});
1516 $('input').on('blur', function
() 24             }, 0);
25 });

重中之重，一定要讓body產生滾動，不然以上方法依然無法解決。

最近同事又測出了我的方案對某些手機的不相容性，所以他給出了另乙個解決方案，經測試已經達到了幾乎所有手機的相容，下面提供給大家：

inputfocus: function (e) , 50)
} else 
}, 200);
},

h5實現輸入框fixed定位在螢幕最底部相容性

H5輸入框擋住解決

h5 安卓input輸入框和改變div 字型顏色

互動幾款優秀的H5輸入框互動方案

h5實現輸入框fixed定位在螢幕最底部相容性

H5輸入框擋住解決

h5 安卓input輸入框和改變div 字型顏色

互動 幾款優秀的H5輸入框互動方案

相關推薦

互動幾款優秀的H5輸入框互動方案