兼容问题:
1.iOS 下 input 在失去焦点时底部留白的问题 (因为 iOS 的键盘升起后页面会重新计算高度)
2. 安卓下 input 在获得焦点后键盘升起挡住了输入框
解决方案: 插入一段 jQuery 脚本, 绑定所有 input 组件的 click 和 blur 事件
- <script>
- var u = navigator.userAgent;
- var isAndroid = u.indexOf('Android')> -1 || u.indexOf('Adr')> -1; //Android 终端
- var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //iOS 终端
- $('input,textarea').on({click: function () {
- if(isAndroid) {
- var target = this;
- setTimeout(function () {
- target.scrollIntoViewIfNeeded();
- }, 600);
- }
- },blur:function () {
- if(isiOS)
- {
- setTimeout(()=>{
- var inputs = $("input");
- var haveFocus=false;// 判断页面是否有 input 有焦点
- inputs.each(function(){// 主要解决 iOS 切换 input 框 click 事件和 blur 冲突导致切换下沉
- haveFocus=$(this).is(":focus");// 遍历得到的每一个 jQuery 对象
- if(haveFocus)
- {
- return false;
- }
- });
- if(!haveFocus)
- {
- Windows.scroll(0,0)
- }
- },300)
- }
- }});
- </script>
附注: iOS 下多个 input 切换时失去焦点事件和 click 事件会冲突, 导致页面会在键盘升起的时候造成异常的下沉 (即滚动到底部), 所以增加了遍历 input 有无焦点的判断.
来源: http://www.jianshu.com/p/4dc7973d4ac8