1.问题一:当某输入框获取焦点时,弹起自定义时间插件,貌似很简单一个功能,但测试时问题来了,获取焦点时键盘也会跟着一起弹出来,如下图:
,那么到这里你可能会有种给input标签增加 readonly 属性的想法,那么我们来试试效果如何,提供ios和Android的两个截图:
恩,Android看着没什么问题了,那我们来看看iOS
看着好像也没什么问题,但是仔细看屏幕下方,用户还是可以操作键盘,what?我只是想隐藏个键盘啊,so bad。静下新来仔细想想此过程发生了什么,当我们点击input的时候,触发focus事件,移动端focus事件会触发键盘弹起,那么,在focus事件触发时我们可不可以手动让它触发blur事件呢,答案肯定是可以的,那么我们来试试:
至此,完美解决。
2.问题二:填写订单页面有很多的input框供用户输入信息,当键盘弹起时,底部"提交订单"一栏使用的是fixed定位,会被键盘顶起,如下图:
这里的解决方案是当focus被触发时键盘会弹出,这时候页面就会发生scroll滚动,我们只需监听resize的变化,然后对应的变化时将底部隐藏,无变化时再显示,代码如下:
让我们来看看效果: