js移动端---H5软键盘兼容问题

经历不少项目，都涉及输入框，总结一下移动端软键盘兼容问题

• 在 Android 和 IOS 上，获知软键盘弹起和收起状态存在差别，且页面 webview 表现不一样。
• 在IOS12 上，微信版本 v6.7.4 及以上，输入框获取焦点，键盘弹起，页面（webview）总体往上滚动，当键盘收起后，不回到原位，致使键盘原来所在位置是空白的。
• 在 IOS 上，使用第三方输入法，高度计算存在误差，致使在有些输入法弹起，将输入框挡住一部分。
• 在有些浏览器上使用一些操做技巧，仍是存在输入框被输入法遮挡。

获取软键盘弹起和收起状态

获取软键盘的弹起仍是收起状态很重要，后面的兼容处理都要以此为前提。然而，H5 并无直接监听软键盘的原生事件，只能经过软键盘弹起或收起，引起页面其余方面的表现间接监听。而且，在 IOS 和 Android 上的表现不尽相同。

IOS 软键盘弹起表现

在 IOS 上，输入框（input、textarea 或 富文本）获取焦点，键盘弹起，页面（webview）并无被压缩，或者说高度（height）没有改变，只是页面（webview）总体往上滚了，且最大滚动高度（scrollTop）为软键盘高度。

Android 软键盘弹起表现

一样，在 Android 上，输入框获取焦点，键盘弹起，可是页面（webview）高度会发生改变，通常来讲，高度为可视区高度（原高度减去软键盘高度），除了由于页面内容被撑开能够产生滚动，webview 自己不能滚动。

IOS 软键盘收起表现

触发软键盘上的“收起”按钮键盘或者输入框之外的页面区域时，输入框失去焦点，软键盘收起。

Android 软键盘收起表现

触发输入框之外的区域时，输入框失去焦点，软键盘收起。可是，触发键盘上的收起按钮键盘时，输入框并不会失去焦点，一样软键盘收起。

监听软键盘弹起和收起

综合上面键盘弹起和收起在 IOS 和 Android 上的不一样表现，咱们能够分开进行以下处理来监听软键盘的弹起和收起：

• 在 IOS 上，监听输入框的 focus 事件来获知软键盘弹起，监听输入框的 blur 事件获知软键盘收起。
• 在 Android 上，监听 webview 高度会变化，高度变小获知软键盘弹起，不然软键盘收起。

// 判断设备类型
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 } }() // 监听输入框的软键盘弹起和收起事件
function listenKeybord($input) { if (judgeDeviceType.isIOS) { // IOS 键盘弹起：IOS 和 Android 输入框获取焦点键盘弹起
    $input.addEventListener('focus', function () { console.log('IOS 键盘弹起啦！'); // IOS 键盘弹起后操做
    }, false) // IOS 键盘收起：IOS 点击输入框之外区域或点击收起按钮，输入框都会失去焦点，键盘会收起，
    $input.addEventListener('blur', () => { console.log('IOS 键盘收起啦！'); // IOS 键盘收起后操做
 }) } // Andriod 键盘收起：Andriod 键盘弹起或收起页面高度会发生变化，以此为依据获知键盘收起
  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]); }

弹起软键盘始终让输入框滚动到可视区

有时咱们会作一个输入表单，有不少输入项，输入框获取焦点，弹起软键盘。当输入框位于页面下部位置时，在 IOS 上，会将 webview 总体往上滚一段距离，使得该获取焦点的输入框自动处于可视区，而在 Android 则不会这样，它只会改变页面高度，而不会去滚动到当前焦点元素到可视区。 因为上面已经实现监听 IOS 和 Android 键盘弹起和收起，在这里，只需在 Android 键盘弹起后，将焦点元素滚动（scrollIntoView()）到可视区。查看效果，能够戳这里。

// 获取到焦点元素滚动到可视区
function activeElementScrollIntoView(activeElement, delay) { var editable = activeElement.getAttribute('contenteditable') // 输入框、textarea或富文本获取焦点后没有将该元素滚动到可视区
  if (activeElement.tagName == 'INPUT' || activeElement.tagName == 'TEXTAREA' || editable === '' || editable) { setTimeout(function () { activeElement.scrollIntoView(); }, delay) } } // ... // Android 键盘弹起后操做
activeElementScrollIntoView($input, 1000); // ...

 

兼容 IOS12 +

在iphoneX上测试，发现键盘收起后，本来被滚动顶起的页面并无回到底部位置，致使原来键盘弹起的位置“空”了。

解决方案：

只需在软键盘收起后，将页面（webview）滚回到窗口最底部位置（clientHeight位置）。

console.log('IOS 键盘收起啦！'); // IOS 键盘收起后操做 // 微信浏览器版本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)); }) }

 

来源：https://segmentfault.com/a/1190000018959389