可能這些是你想要的H5軟鍵盤兼容方案(小結(jié))

// 判斷設(shè)備類型
var judgeDeviceType = function () {
  var ua = window.navigator.userAgent.toLocaleLowerCase();
  var isIOS = /iphone|ipad|ipod/.test(ua);
  var isAndroid = /android/.test(ua);

  return {
    isIOS: isIOS,
    isAndroid: isAndroid
  }
}()

// 監(jiān)聽輸入框的軟鍵盤彈起和收起事件
function listenKeybord($input) {
  if (judgeDeviceType.isIOS) {
    // IOS 鍵盤彈起：IOS 和 Android 輸入框獲取焦點(diǎn)鍵盤彈起
    $input.addEventListener('focus', function () {
      console.log('IOS 鍵盤彈起啦！');
      // IOS 鍵盤彈起后操作
    }, false)

    // IOS 鍵盤收起：IOS 點(diǎn)擊輸入框以外區(qū)域或點(diǎn)擊收起按鈕，輸入框都會失去焦點(diǎn)，鍵盤會收起，
    $input.addEventListener('blur', () => {
      console.log('IOS 鍵盤收起啦！');
      // IOS 鍵盤收起后操作
    })
  }

  // Andriod 鍵盤收起：Andriod 鍵盤彈起或收起頁面高度會發(fā)生變化，以此為依據(jù)獲知鍵盤收起
  if (judgeDeviceType.isAndroid) {
    var originHeight = document.documentElement.clientHeight || document.body.clientHeight;

    window.addEventListener('resize', function () {
      var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
      if (originHeight < resizeHeight) {
        console.log('Android 鍵盤收起啦！');
        // Android 鍵盤收起后操作
      } else {
        console.log('Android 鍵盤彈起啦！');
        // Android 鍵盤彈起后操作
      }

      originHeight = resizeHeight;
    }, false)
  }
}

var $inputs = document.querySelectorAll('.input');

for (var i = 0; i < $inputs.length; i++) {
  listenKeybord($inputs[i]);
}

// 獲取到焦點(diǎn)元素滾動到可視區(qū)
function activeElementScrollIntoView(activeElement, delay) {
  var editable = activeElement.getAttribute('contenteditable')

  // 輸入框、textarea或富文本獲取焦點(diǎn)后沒有將該元素滾動到可視區(qū)
  if (activeElement.tagName == 'INPUT' || activeElement.tagName == 'TEXTAREA' || editable === '' || editable) {
    setTimeout(function () {
      activeElement.scrollIntoView();
    }, delay)
  }
}

// ...
// Android 鍵盤彈起后操作
activeElementScrollIntoView($input, 1000);
// ...

<p>請輸入手機(jī)號</p>
<input type="tel" novalidate="novalidate" pattern="[0-9]*" class="input">

console.log('IOS 鍵盤收起啦！');

// 微信瀏覽器版本6.7.4+IOS12會出現(xiàn)鍵盤收起后，視圖被頂上去了沒有下來
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) {
  window.scrollTo(0, Math.max(document.body.clientHeight, document.documentElement.clientHeight));
}

<div class="chat__content">
  <div>
    <p>一些聊天內(nèi)容1</p>
  </div>
  <!-- 省略幾千行聊天內(nèi)容 -->
</div>
<div class="input__content">
  <div class="input" contenteditable="true"></div>
  <button>發(fā)送</button>
</div>

/* 省略一些樣式 */
.chat__content {
  height: calc(100% - 40px);
  margin-bottom: 40px;
  overflow-y: auto;
  overflow-x: hidden;
}

.input__content {
  display: flex;
  height: 40px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  align-items: center;
}
/* 省略一些樣式 */

console.log('Android 鍵盤彈起啦！');
activeElementScrollIntoView($input, 1000);

// Andriod 鍵盤收起：Andriod 鍵盤彈起或收起頁面高度會發(fā)生變化，以此為依據(jù)獲知鍵盤收起
if (judgeDeviceType.isAndroid) {
  var originHeight = document.documentElement.clientHeight || document.body.clientHeight;

  window.addEventListener('resize', function () {
    var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
    if (originHeight < resizeHeight) {
      console.log('Android 鍵盤收起啦！');

      // 修復(fù)小米瀏覽器下，輸入框依舊被輸入法遮擋問題
      if (judgeDeviceType.isMiuiBrowser) {
        document.body.style.marginBottom = '0px';
      }
    } else {
      console.log('Android 鍵盤彈起啦！');

      // 修復(fù)小米瀏覽器下，輸入框依舊被輸入法遮擋問題
      if (judgeDeviceType.isMiuiBrowser) {
        document.body.style.marginBottom = '40px';
      }
      activeElementScrollIntoView($input, 1000);
    }

    originHeight = resizeHeight;
  }, false)
}