IOS遇到的几个H5坑、h5键盘弹起遮挡输入框的处理

一、IOS遇到的几个H5坑

1、ios端兼容input光标高度

　　问题描述：input输入框光标，在安卓手机上显示没有问题，但是在苹果手机上 当点击输入的时候，光标的高度和父盒子的高度一样。例如下图，左图是正常所期待的输入框光标，右边是ios的input光标。

 　　原因分析：通常我们习惯用height属性设置行间的高度和line-height属性设置行间的距离（行高），当点击输入的时候，光标的高度就自动和父盒子的高度一样了。（谷歌浏览器的设计原则，还有一种可能就是当没有内容的时候光标的高度等于input的line-height的值，当有内容时，光标从input的顶端到文字的底部）

　　解决方案：高度height和行高line-height内容用padding撑开

2、ios端上下滑动时卡顿、页面缺失

　　问题描述：在ios端，上下滑动页面时，如果页面高度超出了一屏，就会出现明显的卡顿，页面有部分内容显示不全的情况，例如下图，右图是正常页面，边是ios上下滑动后，卡顿导致如左图下面部分丢失。

　　原因分析：笼统说微信浏览器的内核，Android上面是使用自带的WebKit内核，iOS里面由于苹果的原因，使用了自带的Safari内核，Safari对于overflow-scrolling用了原生控件来实现。对于有-webkit-overflow-scrolling的网页，会创建一个UIScrollView，提供子layer给渲染模块使用。(注：有待考证)

　　解决方案：只需要在公共样式加入下面这行代码

*{
  -webkit-overflow-scrolling: touch;
}

　　但是这个属性是有bug的，比如如果你的页面中有设置了绝对定位的节点，那么该节点的显示会错乱，当然还有会有其他的一些bug。

　　-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果：

　　auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。

　　touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

3、ios键盘唤起后收起页面不归位

　　问题描述：输入内容，软键盘弹出，页面内容整体上移，但是键盘收起，页面内容不下滑

　　原因分析：固定定位的元素 在元素内 input 框聚焦的时候 弹出的软键盘占位 失去焦点的时候软键盘消失 但是还是占位的 导致input框不能再次输入 在失去焦点的时候给一个事件

　　解决方案：

<div class="list-warp">
  <div class="title">
    <span>投·被保险人姓名</span>
  </div>
  <div class="content">
    <input
      class="content-input"
      placeholder="请输入姓名"
      v-model="peopleList.name"
      @focus="changefocus()"
      @blur.prevent="changeBlur()"
    />
  </div>
</div>

changeBlur(){
  let u = navigator.userAgent, app = navigator.appVersion;
  let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
  if(isIOS){
    setTimeout(() => {
      const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
      window.scrollTo(0, Math.max(scrollHeight - 1, 0))
    }, 200)
  }
}

　　position: fixed的元素在ios里，收起键盘的时候会被顶上去，特别是第三方键盘

4、安卓弹出的键盘遮盖文本框

　　问题描述：安卓微信H5弹出软键盘后挡住input输入框，如下左图是期待唤起键盘的时候样子，右边是实际唤起键盘的样子

 　　解决方案：给input和textarea标签添加focus事件，如下，先判断是不是安卓手机下的操作，当然，可以不用判断机型，Document 对象属性和方法，setTimeout延时0.5秒，因为调用安卓键盘有一点迟钝，导致如果不延时处理的话，滚动就失效了

changefocus(){
  let u = navigator.userAgent, app = navigator.appVersion;
  let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
  if(isAndroid){
    setTimeout(function() {
      document.activeElement.scrollIntoViewIfNeeded();
      document.activeElement.scrollIntoView();
    }, 500);       
  }
},

　　Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内。

　　而Element.scrollIntoViewIfNeeded()方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。但如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动

二、h5键盘弹起遮挡输入框的处理

1、问题：混合开发中遇到一个问题，有些型号的安卓机和ios机型，输入框唤起键盘后，输入框会被键盘遮挡，需要手动滑动才能漏出来，影响用户体验

2、解决办法

（1）ios和android手机唤起的windows事件不一样，要分别处理

（2）document.body.scrollTop无效，可以用document.documentElement.scrollTop替换

3、具体实现过程

// 判断手机 - ios/andriod
function isIOS() {
  const u = navigator.userAgent;
  return !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
}
// 键盘弹起，输入框被遮挡
function judgeInput() {
  if (isIOS()) {
    window.addEventListener('focusin', function () {
      console.log(1+document.activeElement.tagName);
      if (
        document.activeElement.tagName === 'INPUT' ||
        document.activeElement.tagName === 'TEXTAREA'
      ) {
        setTimeout(function () {
          document.documentElement.scrollTop = document.body.scrollHeight;
        }, 0);
      }
    });
  } else {
    window.addEventListener('resize', function () {
      console.log(2+ document.activeElement.tagName);
      if (
        document.activeElement.tagName === 'INPUT' ||
        document.activeElement.tagName === 'TEXTAREA'
      ) {
        setTimeout(function () {
          document.activeElement.scrollIntoView();
        }, 0);
      }
    });
  }
}
export {
  isIOS,
  judgeInput
}

（1）document.activeElement是什么？

Document 和 ShadowRoot 接口的 activeElement 只读属性，用来返回当前在 DOM 或者 shadow DOM 树中处于聚焦状态的Element。

　　解释：这个属性只读，能能拿到当前处于焦点状态的元素。

　　我在使用中发现安卓手机是可以自动弹起，不会被遮挡的，但是 ios 手机不行，会被遮挡。所以我在实际使用时这样用即可满足：

// 判断手机 - ios/andriod
function isIOS() {
  const u = navigator.userAgent
  return !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) //ios终端
}
// IOS 键盘弹起，输入框被遮挡
export function judgeInput() {
  if (isIOS()) {
    window.addEventListener('focusin', function () {
      if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') {
        setTimeout(function () {
          document.activeElement.scrollIntoViewIfNeeded()
        }, 500)
      }
    })
  }
}

　　注意使用到的这个即可：document.activeElement.scrollIntoViewIfNeeded()