【交互】幾款優秀的H5輸入框交互方案

　　移動端頁面開發，在輸入的部分，常常會遇到一個問題：輸入法彈出後將輸入框遮住。若是這時候，要模擬相似微信輸入界面的交互的話，就須要計算輸入法的高度，而且調整頁面視口的高度，或者將頁面滾動至輸入框的位置，將輸入框露出來。先不說如何準確地獲取輸入法的高度，我的認爲這種方式實在是不得已而爲之，實在不夠優雅。

　　因爲最近正好關注這個問題，無心中看到如下頁面作的處理，感受這個交互處理得很是棒。先看效果。

　　案例1：來自京東衆籌項目頁面。

　　看明白了嗎？點擊頁面底部輸入框的時候，彈出一個全屏的遮罩，展現一個更大的輸入框且將其置頂。剛纔是在Chrome模擬器中的錄屏，再來看下手機端觸發輸入法的實際效果：

　　點評：這麼作的好處是不只給了用戶更大的發揮空間，同時也免去了去模擬原生界面的麻煩。

　　　　　好的交互不必定要從別人那裏學來，好的交互能夠發揮技術的長處，更好地知足用戶的需求。

　　　　   固然，若是用戶輸入時，須要參看原先的內容，好比：答題類的頁面，用戶須要對着問題，輸入回答的文字，上面這種交互是不大適用的。