#h5软键盘兼容方案

Posted liuhuanwen

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了#h5软键盘兼容方案相关的知识,希望对你有一定的参考价值。

h5软键盘兼容方案

本人在做公司项目的时候,在h5上调用键盘,发现了许多问题,主要问题总结如下

1.在 androidios 上,键盘弹出收起在页面 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)
  

2.微信浏览器版本6.7.4+IOS12会出现键盘收起后,视图被顶上去了没有下来

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));
  )

3.键盘滚动导致遮挡输入框

1.在 IOS 上,会将 webview 整体往上滚一段距离,使得该获取焦点的输入框自动处于可视区,而在 Android 则不会这样,它只会改变页面高度,而不会去滚动到当前焦点元素到可视区。

2.由于上面已经实现监听 IOS 和 Android 键盘弹起和收起,在这里,只需在 Android 键盘弹起后,将焦点元素滚动到可视区即可


// 获取到焦点元素滚动到可视区
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);
// ...

以上是关于#h5软键盘兼容方案的主要内容,如果未能解决你的问题,请参考以下文章

H5中常见的 Android 和 iOS 兼容性问题

H5中常见的 Android 和 iOS 兼容性问题

H5页面关于android软键盘弹出顶起底部元素的解决方案

H5页面软键盘常见问题

H5如何对android和ios手机软键盘的监听

移动端H5软键盘的问题