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

   问题描述：

     很多项目都会把按钮通过fixed定位在页面的底部。在android中就会有这个一个问题，软键盘弹起来的同时会把

    底部的按钮也会一起弹上去，这往往不是我们想要的。对android手机的软键盘的监听事件在前端是没有的。所以

    就另辟蹊径了。

      在android中，可以利用窗口的高度发生变化window.onresize事件来做突破点，但是ios中软键盘的弹起并不会触发window.onresize事件。

    总结：

    1.在ios中软键盘弹起时，仅会引起body的scrollTop值改变，但是我们可以通过输入框的获取焦点情况来做判断，单也只能在ios中采用这个方案，因为在android中存在主动受气键盘后，但输入框并没有失去焦点，而ios中键盘受气后就会失去焦点；

2.在androis中软键盘弹起或收起时，会改变window的高度，因此监听window的onresize事件；

一、Android

//获取原窗口的高度

var originalHeight=document.documentElement.clientHeight ||document.body.clientHeight;

window.onresize=function(){

    //键盘弹起与隐藏都会引起窗口的高度发生变化

      var resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;

        if(resizeHeight-0

        //当软键盘弹起，在此处操作

        }else{

        //当软键盘收起，在此处操作

        }

}

二、ios

focusin和focusout支持冒泡，对应focus和blur, 使用focusin和focusout的原因是focusin和focusout可以冒泡，focus和blur不会冒泡，这样就可以使用事件代理，处理多个输入框存在的情况。

document.body.addEventListener('focusin', () => {

            //软键盘弹出的事件处理

            if(isIphone()）{

            }

        })

  document.body.addEventListener('focusout', () => {

      //软键盘收起的事件处理

        if(isIphone()）{

        }

  })

特此声明文章出处：https://blog.csdn.net/u012982629/article/details/81905894

补充：

// 兼容ios键盘回落，页面不回的问题

topBot ()

{

var u = navigator.userAgent

var flag

var myFunction

var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)

let ws

if (isIOS){

document.body.addEventListener('focusin', () => { // 软键盘弹起事件

flag = true clearTimeout(myFunction)

})

document.body.addEventListener('focusout', () => { // 软键盘关闭事件

flag = false ws = document.body.scrollTop == 0 ? document.documentElement.scrollTop : document.body.scrollTop;

if (!flag) {

myFunction = setTimeout(function(){ window.scrollTo({top:ws,left:0,behavior:"smooth"})

// 重点 =======当键盘收起的时候让页面回到原始位置(这里的top可以根据你们个人的需求改变，并不一定要回到页面顶部) },200) }

else { return } }) }

else{ return }},