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

Posted 2023-04-27

参考技术A     总结：

    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<originalHeight-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软键盘取消后，页面没有恢复），移动端软键盘监听（弹出，收起），及影响定位布局的问题

一：移动端软键盘监听（弹出，收起）    　　

     1.监听resize ( Android）

            var winHeight = $(window).height(); //获取当前页面高度

$(window).resize(function () {
    var thisHeight = $(this).height();
    if ( winHeight - thisHeight > 140 ) {
     //键盘弹出
    } else {
    //键盘收起
    }
})

　　140是一个预估值的阀值，用来排除其他的resize操作。仅resize的高度差大于140时，才被识别为软键盘交互，否则不是。如浏览器的工具栏、搜索栏的隐藏，window的窗口页会有一个较小的变化。

 　  2.监听input失焦blur（IOS）

　　因为ios的第三方键盘可能并不会导致window resize，所以不能用resize监听，但是可以通过输入框是否获取焦点来判断； （在android中，点击键盘上的收起按钮，键盘虽然收起了，输入框仍然处于焦点状态，并没有触发focusout事件）

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

 

$(document).on(‘focusin‘, function () {
　　//软键盘弹出的事件处理
});

$(document).on(‘focusout‘, function () {
　　//软键盘收起的事件处理
});

 

　　

二：布局问题 （针对定位）

       1.输入框input获取焦点时，虚拟键盘会把fixed元素顶上去(主要在部分安卓上)

1 2 3 4 5 6 7

$(‘#phone‘).bind(‘focus‘,function(){              $(‘.bottom_fix‘).css(‘position‘,‘static‘);              //或者$(‘#viewport‘).height($(window).height()+‘px‘);          }).bind(‘blur‘,function(){              $(‘.bottom_fix‘).css({‘position‘:‘fixed‘,‘bottom‘:‘0‘});              //或者$(‘#viewport‘).height(‘auto‘);          });

 

　　2.屏幕旋转时，出现上面问题

1 2 3 4 5 6 7

$(document).bind(‘orientationchange‘,function(){              if(window.orientation==90 || window.orientation==-90){                  $(‘.bottom_fix‘).css(‘position‘,‘static‘);              }else{                  $(‘.bottom_fix‘).css({‘position‘:‘fixed‘,‘bottom‘:‘0‘});              }          });

　　3.iOS下Html页面中input获取焦点被弹出键盘遮挡

 

1 2 3 4 5 6 7

var u = navigator.userAgent, app = navigator.appVersion;  var isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端  if (isiOS) {  　　window.setTimeout(function(){      window.scrollTo(0,document.body.clientHeight);  　　}, 500);  }