H5（移动端）页面软键盘弹起和收起兼容封装2019-6-6

此篇文章只为记录，自己在处理H5页面关于软键盘弹起的不同浏览器平台的兼容问题，方便以后查看。

问题1：Android在input输入框调取软键盘输入完，收起的时候出现，不失去焦点？

问题2：Android在有多个输入框时且输入框在底部时，软键盘弹起会覆盖掉输入框？

问题3：微信6.7.4版本，部分ios系统12.1.1手机（特别是小屏幕手机）键盘收起后不会回到原位，导致键盘原来的位置是空白？

// 上面所描述的问题，最根本原因为：在Android和IOS页面表现不同
1， IOS中，输入框获取焦点（blur）软键盘弹起，页面不会被压缩，只是页面向上滚动了，滚动的最大高度（scrollTop）为软键盘的高度。
    这一点可以在IOS软键盘弹起的时候去拉动一下页面 ；
2，IOS中，触发软键盘的完成或者输入框以外的区域，软键盘收起，输入框失去焦点（focus）。    
3，Android，输入框获取焦点软键盘弹起，页面高度会发生改变；
4，Android，触发输入框以外区域，软键盘收起，输入框失去焦点。但是点击软键盘中的完成按钮，不会失去焦点，但软键盘收起。

//找到原因之后，解决办法就是
// 1，IOS就监听获得焦点和失去焦点来判断，软键盘弹起和收起；
// 2，Android就通过页面的尺寸变化来判断，软键盘弹起和收起。

// 首先判断设备类型（函数表达式）
var deviceType= function () {
var ua = window.navigator.userAgent.toLocaleLowerCase();
var isIos = /iphone|ipad|ipod/.test(ua);
var isAndroid = /android/.test(ua);
  return {
    isIos: isIos,
    isAndroid: isAndroid
  }
}();
// 监听键盘弹起和收起事件方法封装
function watchKeyword(el){
// 如果是Ios设备，就监听获得焦点和失去焦点，运用dom2级事件true捕获阶段处理，fasle冒泡阶段处理
	if(deviceType.isIos){
		// Ios 输入框获得焦点，软键盘弹起
		 el.addEventListener('focus', function () {
	        // 键盘弹起
	      }, false);
	      
	    // Ios 输入框失去焦点键盘收起 
	      el.addEventListener('blur', function () {
	      	// 键盘收起
	      	// 修复微信浏览器版本6.7.4 IOS12会出现键盘收起后，视图被顶上去了没有下来
	        var wechatInfo = window.navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i);
	        if (!wechatInfo) return;
	        var wechatVersion = wechatInfo[1];
	        var version = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
	        if (+wechatVersion.replace(/\./g, '') >= 674 && +version[1] >= 12) {
	          setTimeout(function () {
	            window.scrollTo(0, Math.max(document.body.clientHeight, document.documentElement.clientHeight));
	          })
	        }
			},false）
		}
// 如果是Android设备，就监听页面尺寸变化，运用dom2级事件true捕获阶段处理，fasle冒泡阶段处理	
	if (deviceType.isAndroid) {
      // 原始高度
      var originHeight = document.documentElement.clientHeight || document.body.clientHeight;
      window.addEventListener('resize', function () {
        // 新高度
        var newHeight = document.documentElement.clientHeight || document.body.clientHeight;
        if (newHeight > originHeight) {
          // 键盘收起 
          
        } else {
          // 键盘弹起
          
          // 修复安卓设备软键盘弹起会覆盖掉输入框
          elScrollIntoView(el, 100)
        }
        originHeight = newHeight
      }, false)
    }
}
// 获取能输入的元素，由于引入了jquery所以用了jquery，当然也可以用原生
 	var $inputs = $(":input");
 	// 遍历页面每一个输入元素调用监听键盘方法
 	$inputs.each(function (i, el) {
    watchKeyword(el)
  })


// 获取到焦点元素滚动到可视区方法
  function elScrollIntoView(el, delay) {
    // contentEditable 属性设置或返回元素内容是否可编辑。
    var editable = el.getAttribute('contenteditable')
    // 输入框获取焦点后没有将该元素滚动到可视区
    if (el.tagName == 'INPUT' || el.tagName == 'TEXTAREA' || editable === '' || editable) {
      setTimeout(function () {
      // 让当前的元素滚动到浏览器窗口的可视区域内。
        el.scrollIntoView();
      }, delay)
    }
  }