[TOC]

问题描述

详细情况可参考链接 可能这些是你想要的H5软键盘兼容方案

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

解决方案

  1. 在 IOS 上，监听输入框的 focus 事件来获知软键盘弹起，监听输入框的 blur 事件获知软键盘收起。
  2. 在 Android 上，监听 webview 高度会变化，高度变小获知软键盘弹起，否则软键盘收起。
  1. // 判断设备类型
  2. var judgeDeviceType = function () {
  3.   var ua = window.navigator.userAgent.toLocaleLowerCase();
  4.   var isIOS = /iphone|ipad|ipod/.test(ua);
  5.   var isAndroid = /android/.test(ua);
  7.   return {
  8.     isIOS: isIOS,
  9.     isAndroid: isAndroid
  10.   }
  11. }()
  13. // 监听输入框的软键盘弹起和收起事件
  14. function listenKeybord($input) {
  15.   if (judgeDeviceType.isIOS) {
  16.     // IOS 键盘弹起：IOS 和 Android 输入框获取焦点键盘弹起
  17.     $input.addEventListener('focus', function () {
  18.       console.log('IOS 键盘弹起啦！');
  19.       // IOS 键盘弹起后操作
  20.     }, false)
  22.     // IOS 键盘收起：IOS 点击输入框以外区域或点击收起按钮，输入框都会失去焦点，键盘会收起，
  23.     $input.addEventListener('blur', () => {
  24.       console.log('IOS 键盘收起啦！');
  25.       // IOS 键盘收起后操作
  26.     })
  27.   }
  29.   // Andriod 键盘收起：Andriod 键盘弹起或收起页面高度会发生变化，以此为依据获知键盘收起
  30.   if (judgeDeviceType.isAndroid) {
  31.     var originHeight = document.documentElement.clientHeight || document.body.clientHeight;
  33.     window.addEventListener('resize', function () {
  34.       var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
  35.       if (originHeight < resizeHeight) {
  36.         console.log('Android 键盘收起啦！');
  37.         // Android 键盘收起后操作
  38.       } else {
  39.         console.log('Android 键盘弹起啦！');
  40.         // Android 键盘弹起后操作
  41.       }
  43.       originHeight = resizeHeight;
  44.     }, false)
  45.   }
  46. }
  48. var $inputs = document.querySelectorAll('.input');
  50. for (var i = 0; i < $inputs.length; i++) {
  51.   listenKeybord($inputs[i]);
  52. }
  1. // 获取到焦点元素滚动到可视区
  2. function activeElementScrollIntoView(activeElement, delay) {
  3.   var editable = activeElement.getAttribute('contenteditable')
  5.   // 输入框、textarea或富文本获取焦点后没有将该元素滚动到可视区
  6.   if (activeElement.tagName == 'INPUT' || activeElement.tagName == 'TEXTAREA' || editable === '' || editable) {
  7.     setTimeout(function () {
  8.       activeElement.scrollIntoView();
  9.     }, delay)
  10.   }
  11. }
  13. // ...
  14. // Android 键盘弹起后操作
  15. activeElementScrollIntoView($input, 1000);

唤起纯数字键盘

  1. <p>请输入手机号</p>
  2. <input type="tel" novalidate="novalidate" pattern="[0-9]*" class="input">