【交互】几款优秀的H5输入框交互方案

　　移动端页面开发，在输入的部分，常常会遇到一个问题：输入法弹出后将输入框遮住。若是这时候，要模拟相似微信输入界面的交互的话，就须要计算输入法的高度，而且调整页面视口的高度，或者将页面滚动至输入框的位置，将输入框露出来。先不说如何准确地获取输入法的高度，我的认为这种方式实在是不得已而为之，实在不够优雅。

　　因为最近正好关注这个问题，无心中看到如下页面作的处理，感受这个交互处理得很是棒。先看效果。

　　案例1：来自京东众筹项目页面。

　　看明白了吗？点击页面底部输入框的时候，弹出一个全屏的遮罩，展现一个更大的输入框且将其置顶。刚才是在Chrome模拟器中的录屏，再来看下手机端触发输入法的实际效果：

　　点评：这么作的好处是不只给了用户更大的发挥空间，同时也免去了去模拟原生界面的麻烦。

　　　　　好的交互不必定要从别人那里学来，好的交互能够发挥技术的长处，更好地知足用户的需求。

　　　　   固然，若是用户输入时，须要参看原先的内容，好比：答题类的页面，用户须要对着问题，输入回答的文字，上面这种交互是不大适用的。