记录下h5页面开发中的一个坑点

场景一：微信内浏览器，在键盘被自动唤起后，页面回被resize（页面加载好，用户自己手动focus input唤起键盘就不会有这种情况）

解决办法暂时也没啥高级的：就在body或者其他container的css 加一个 min-height:100vh即可

场景二：如果container 例如body 或者某一父层级div，设置了css overflow:hidden,移动端滑动会变得不流畅，仅限于ios

解决办法：
要么想办法去掉设置overflow：比如不要嫌超过宽度；或者加一条样式如下

1
2
3
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch; //加了这个就变流畅了

场景三：ios浏览器，坑货，第一次加载js，所有input的focus都不执行！也就是不能唤起键盘，必须用户在该页面有点击等事件

解决办法：

打死乔布斯？？？

还是老实修改交互吧，参考资料：https://juejin.im/post/5b8c90f6e51d4538bb478b4d

2018-09-20

实践出真知，结合上述大神的资料，发现：

  1. input的focus方法，不写在异步的方法里可以实现focus，就是事件直接驱动focus；
  2. 只要能够唤起键盘，其他的组件再focus，键盘可以不收回，直接focus最后一个执行focus的组件（实验发现：safari浏览器，微信内置浏览器可以，其他一些app内嵌的web页面不行，键盘会被收回，有待探究）

综上所述，只要能唤起键盘，啥都好说！

所以就在html或者ejs等根容器上面，写一个不是隐藏域的input：

1
<input id="qs_bitch" type="text" style="position: absolute;right: 0;bottom: 0;background: transparent;border: none;height: 1px;">

注意不要隐藏，style啊type hidden，都不要，设置高度1px即可

然后在页面跳转的时候执行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
fakeAutoFocus(){
  // 修复重大bug，自动focus
  var path = window.location.pathname;
  var isIOS = /(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent);
  var isAndroid = /(Android)/i.test(navigator.userAgent);
  // 判断该页面js是否加载过
  var isHuafei = path.indexOf("huafei.html") !== -1;
  var isFlow = path.indexOf("flow.html") !== -1;
  var isRecharge = path.indexOf("recharge.html") !== -1;
  var isHadLoaded_huafei = window._js_load_yhq.indexOf("huafei") !== -1;
  var isHadLoaded_flow = window._js_load_yhq.indexOf("flow") !== -1;
  var isHadLoaded_recharge = window._js_load_yhq.indexOf("recharge") !== -1;
  if(isIOS){
    if((isHuafei&&!isHadLoaded_huafei)||(isFlow&&!isHadLoaded_flow)||(isRecharge&&!isHadLoaded_recharge)){
      console.log("不延时，先唤起ios键盘");
      var qs_bitch = document.getElementById("qs_bitch");
      if(qs_bitch){
        qs_bitch.focus()
      }
    }
  }
}

加几个判断条件

首先要仅在ios里面需要执行
特殊需要唤起键盘的页面
如果你用了webpack分包加载，那么第一次加载js需要执行，之后在进入页面，ios已经信任该js，就不需要再执行这个假focus方法了

这样之后在真实需要focus的组件再次focus，就可以把焦点聚焦到最新到组件上，而且键盘不收回（有些app不行，我再看看为啥）
槽点：有些app测试不行，键盘被收回