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

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

　　由于最近正好关注这个问题，无意中看到以下页面做的处理，感觉这个交互处理得非常棒。先看效果。

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

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

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

　　　　　好的交互不一定要从别人那里学来，好的交互可以发挥技术的长处，更好地满足用户的需求。

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

　　　　　　

 

转载于:https://www.cnblogs.com/anywing/p/4810527.html