移动端input输入居底部所引起的问题及解决方法

刚工作不久，第一次接到要让input输入框居底部的页面的时候，最初的想法是用fixed方式，但在手机上明显的出现了问题。之后公司里面的带我的前辈发给了我这篇文章“Web移动端fixed布局的解决方案”。由于页面中并不需要文章中讲到的布局，参考文章中提供的思路:”由于fixed在软键盘唤起后会失效，导致页面可以滚动时，会跟随页面一起滚动。因此如果页面无法滚动，那么fixed元素即使失效，也不会滚动”，结合自己页面中顶部区域的高度是缩放的情况，选择使用js在页面初始化时动态的计算设置显示评论的区域高度，这样就可以刚好把input区域挤到底部，在安卓和大部分苹果机型上面获取焦点时就可以正常的弹起。在测试的苹果机型中有5c,5,6,6+(公司目前测试大都是借同事的手机测的，就这些机型)，5c和越狱过的6出现了问题：第一次输入顶不起来。后来发现唤起输入法后整个页面是可以上下滑动的，既然可以滑动，就在input获取焦点时让页面整体的滑动到底部。添加了获取焦点事件后在5c和越狱6上面在第一次时就可以正常的顶起来了。本以为可以愉快的记录下这次的经验，事实证明还是自己太天真了！

如果只是单纯的测试获取焦点是否可以正常的被顶起，测试多少次都没有什么问题，但输入内容的不同就不一样了，这次问题是5c上面。在第一次输入纯英文并且不清除内容的情况下，隐藏软键盘，然后进行第二次获取焦点，它就顶不起来，顶不起来，顶不起来。重要的事情要说三遍。想来想去还是到网上溜达溜达吧！然后发现了知乎里面也有人问了input居底部顶起的问题，看了下面的回答，有一位同学回答说软键盘弹起是要时间的（忘记链接了），感觉突然脑内一闪：延时滑动到底部。给滑动到底部设置了500的延时，5c上就好了，其它的机型也是好的。虽然解决了问题，但原因还是不太了解。现在时不时的还是会想起这个问题。