[vue]移动端软键盘处理方案

前言

一谈起移动端的软键盘处理，都是令人比较头疼的事情，由于系统机型不同，导致出现键盘弹出效果也大有差异。最近做的项目中都遇到了这些问题，故写此文章记录一下。
目前知道有以下问题：

• Ios与Android的系统差异，软键盘弹出后，页面的webview表现是不同的。
• 如果页面设计的input或者textarea位于页面的中下部位，或者底部时，弹出软键盘的时候会遮挡输入框。
• 在微信版本6.7.4以上，IOS系统版本12以上，当软键盘弹起后，页面（webview）整体往上滚动，当键盘收起后，不回到原位，导致键盘原来所在位置是空白的。

问题解决

监听软键盘的状态

如果想对键盘事件做相应的处理，我们首先得获取到软键盘弹出或者收起的状态，然后做相应处理，但是H5中并无直接提供软键盘弹起事件的监听方法，那么，我们换种思路去实现监听。

由于上面提过，IOS与Android软键盘弹起后，页面webview表现是不同的，是怎样的不同呢？

1.IOS在点击input框或者textarea框的之后，软键盘弹起，页面的高度的高度并没有改变，只是webview整体上移了，并且执行的scrollTop方法，scrollTop的距离即为软键盘的高度。

2.Android在点击input框或者textarea后，软键盘弹起，页面高度改变，webview被压缩。

在安卓上处理软键盘时间

因此，对于Android机的软键盘弹起或收起，可以通过resize方法监听到，但是在IOS机型上，resize事件是不会触发的。

简单暴力点，对于Android机型的处理，可以直接写在index.html 的script里面。如下：

  const u = navigator.userAgent;
    if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) { //安卓手机
      window.addEventListener('resize', function () {
        // Document 对象的activeElement 属性返回文档中当前获得焦点的元素。
        if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') {
          console.log('安卓触发', document.activeElement.tagName)
          window.setTimeout(function() {
            document.activeElement.scrollIntoView(true);
          }, 50);
        }
      })
    }

这样既可解决Android机型上软键盘遮挡输入框问题
关于scrollIntoView方法：
Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内,
这里接受一个参数，可以是Boolean类型也可以是object类型，这里，我们只说下
Boolean类型，如果为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐，如果为false，元素的底端将和其所在滚动区的可视区域的底端对齐。上面代码中，我们设置了true,那么input或者textarea将会顶到顶部可视区域。

在IOS上处理软键盘事件

1.IOS上既然不会触发resize事件，那我们采用@focus和@blur来处理：

onFocus () {
      const u = navigator.userAgent
      if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) { // 安卓手机
      } else { // ios
        setTimeout(() => {
          document.getElementsByTagName('body')[0].style.height = '400px'
          this.$refs.ttextarea.scrollIntoView(false)
        }, 50)
      }
    },

 onBlur () {
      setTimeout(function () {
        document.getElementsByTagName('body')[0].style.height = window.innerHeight + 'px'
      }, 50)
    },

大致思路就是在聚焦的时候把页面可视区域高度设置一个固定值，这里的400px只是参考值，具体需要调试计算。scrollIntoView(false)讲input或者是textarea滚动到可视区域底部，所以就是贴着软键盘上方了。

2.还有一种思路就是在聚焦的时候，把页面设置为fixed,这样也能解决

处理在微信上ios软键盘事件

在微信版本6.7.4以上，IOS系统版本12以上，当软键盘弹起后，页面（webview）整体往上滚动，当键盘收起后，不回到原位，导致键盘原来所在位置是空白的，处理方法：在blur后处理：

 onBlur () { 
      setTimeout(() => {
        window.scrollTo(0, document.body.scrollTop + 1)
        document.body.scrollTop >= 1 && window.scrollTo(0, document.body.scrollTop - 1)
      }, 50)
    },