2017-12-06更新
测试又发现了新的问题，就是input内的光标会随着页面滑动，出现下图中的情况：
光标随着页面滑动
在网上查资料的时候找到了原因，如下图：
问题原因
这位分享作者所吐槽的内容也正好是我想吐槽的，哈哈！
言归正传，既然找到了问题出现的原因，也有了解决方案，那就剩下如何实现这个解决方案的工作了。监听页面滚动，每次滚动就让input失去焦点，我最先想到的是jQuery的scroll()方法，具体代码如下：
$('.div_form').scroll(function(event) {
$('input').blur();
});
给中间滚动的表单部分div_form增加一个scroll()事件，让input失去焦点，进而收起小键盘，实现了我们想要的效果。
但是scroll()方法的触发是在滚动动作结束之后，滚动的过程比较长或者缓慢的话，还是能看到光标随着页面滚动的现象，因此scroll()方法还是不能解决我们的问题。
至此，我们要实现的效果变成了只要页面一开始滚动，就要让input失去焦点，进而收起小键盘。HTML5中的触摸事件touchmove可以完美解决，具体代码如下：
document.addEventListener('touchmove',input_blur,false);
function input_blur(event) {
$('input').blur();
}
增加了这个方法之后，只要页面接收到滑动事件，input_blur方法就会马上执行，完美实现了我们要的效果。
***********************************************更新分隔线***********************************************
背景
项目做了移动端的网页，嵌套在APP里面使用。其中几个页面是需要用户填很多数据然后提交，页面布局都是顶部固定的导航栏+中间可滑动的表单+底部固定的按钮，顶部和底部都是用position: fixed;来定位的。页面写好以后，在电脑浏览器上显示是没问题的，因为不会有虚拟小键盘弹起，在安卓手机APP里显示也没问题，只是底部的按钮会显示在小键盘上方，不影响美观。但是在iPhone手机的APP里就会出问题了，具体表现是键盘弹起后，滑动中间的表单，顶部和底部的内容位置会错乱，而且不会跟随屏幕滑动改变，如下图
“立即申请”按钮位置出错
顶部导航栏位置出错
解决方案
为了解决这个问题，上网搜索了很多资料，有一个方法是在小键盘弹起（隐藏）的时候把底部的按钮和顶部的导航栏隐藏（显示），这个方法确实可以解决问题，但是用户体验不好，放弃了。
比这更好的方法是利用CSS3的新特性，给中间的表单增加以下样式：
.div_content {
position: absolute;
overflow-x: hidden;
overflow-y: scroll;
height: calc(100% - 100px);
-webkit-overflow-scrolling: touch;
}
其中overflow-x: hidden; overflow-y: scroll;是裁剪 div 元素中内容的上/下/左/右边缘，hidden表示隐藏不显示，scroll表示支持滚动，具体参数可以查看下面的链接：CSS3 overflow-x 属性
这里我们设置左右不滚动，上下滚动。
第三行height: calc(100% - 100px);则是动态分配表单的高度，其中100%表示屏幕高度的100%，100px表示顶部导航栏和底部按钮的总高度，具体参数可以查看下面的链接：CSS3的calc()使用
最后-webkit-overflow-scrolling: touch;则是优化了移动端的屏幕滚动。
这样，键盘弹起以后页面样式就不会错乱了。
网友评论