移動端input輸入居底部所引起的問題及解決方案

標籤：

剛工作不久，第一次接到要讓input輸入框居底部的頁面的時候，最初的想法是用fixed方式，但在手機上明顯的出現了問題。之後公司裡面的帶我的前輩發給了我這篇文章“Web移動端fixed布局的解決方案”。由於頁面中並不需要文章中講到的布局，參考文章中提供的思路:”由於fixed在軟鍵盤喚起後會失效，導致頁面可以滾動時，會跟隨頁面一起滾動。因此如果頁面無法滾動，那麼fixed元素即使失效，也不會滾動”，結合自己頁面中頂部地區的高度是縮放的情況，選擇使用js在頁面初始化時動態計算設定顯示評論的地區高度，這樣就可以剛好把input地區擠到底部，在安卓和大部分蘋果機型上面擷取焦點時就可以正常的彈起。在測試的蘋果機型中有5c,5,6,6+(公司目前測試大都是借同事的手機測的，就這些機型)，5c和越獄過的6出現了問題：第一次輸入頂不起來。後來發現喚起IME後整個頁面是可以上下滑動的，既然可以滑動，就在input擷取焦點時讓頁面整體的滑動到底部。添加了擷取焦時間點事件後在5c和越獄6上面在第一次時就可以正常的頂起來了。本以為可以愉快的記錄下這次的經驗，事實證明還是自己太天真了！

  如果只是單純的測試擷取焦點是否可以正常的被頂起，測試多少次都沒有什麼問題，但輸入內容的不同就不一樣了，這次問題是5c上面。在第一次輸入純英文並且不清除內容的情況下，隱藏軟鍵盤，然後進行第二次擷取焦點，它就頂不起來，頂不起來，頂不起來。重要的事情要說三遍。想來想去還是到網上溜達溜達吧！然後發現了知乎裡面也有人問了input居底部頂起的問題，看了下面的回答，有一位同學回答說軟鍵盤彈起是要時間的（忘記連結了），感覺突然腦內一閃：延時滑動到底部。給滑動到底部設定了500的延時，5c上就好了，其它的機型也是好的。雖然解決了問題，但原因還是不太瞭解。現在時不時的還是會想起這個問題。

移動端input輸入居底部所引起的問題及解決方案