移动端键盘弹起引起的fixed定位问题

1.问题一：当某输入框获取焦点时，弹起自定义时间插件，貌似很简单一个功能，但测试时问题来了，获取焦点时键盘也会跟着一起弹出来，如下图：

键盘也跟着弹出

，那么到这里你可能会有种给input标签增加 readonly 属性的想法，那么我们来试试效果如何，提供ios和Android的两个截图：

Android增加readonly属性后的表现

恩，Android看着没什么问题了，那我们来看看iOS

ios增加readonly属性后的表现

看着好像也没什么问题，但是仔细看屏幕下方，用户还是可以操作键盘，what?我只是想隐藏个键盘啊，so bad。静下新来仔细想想此过程发生了什么，当我们点击input的时候，触发focus事件，移动端focus事件会触发键盘弹起，那么，在focus事件触发时我们可不可以手动让它触发blur事件呢，答案肯定是可以的，那么我们来试试：

触发focus时手动blur

再看看ios效果

至此，完美解决。
2.问题二：填写订单页面有很多的input框供用户输入信息，当键盘弹起时，底部"提交订单"一栏使用的是fixed定位，会被键盘顶起，如下图：

底部被顶起

这里的解决方案是当focus被触发时键盘会弹出，这时候页面就会发生scroll滚动，我们只需监听resize的变化，然后对应的变化时将底部隐藏，无变化时再显示，代码如下：

代码

让我们来看看效果：

效果