h5 移动端 监听输入法的键盘弹起、收起,输入法弹出导致页面底部按钮上浮

2 篇文章 0 订阅

------------------------------------------------------input框时输入框弹出,ios显示正常:(如下)---------------------------------------

--------------------------------------------------------但是andriod则会将按钮挤上去,(如下)---------------------------------------------------:

首先还是从源头上看,针对安卓系统来说,软键盘弹起的方式是很有多种的常用的是这2种android:windowSoftInputMode="adjustPan|adjustResize” 
1. “adjustResize” 
该Activity主窗口总是被调整屏幕的大小以便留出软键盘的空间,会调用onSizeChanged方法 
2. “adjustPan” 
该Activity主窗口并不调整屏幕的大小以便留出软键盘的空间。相反,当前窗口的内容将自动移动以便当前焦点 不被键盘覆盖和用户能总是看到输入内容的部分。不会调用onSizeChanged方法

综上所述安卓会发生这个现象是因为原窗口为了留出软键盘的空间,高度发生了改变,绝对定位在底部的按钮就会被挤压,给人的假象就是被键盘顶起。既然我们知道了原因出在了原窗口高度发生了改变,那就有可做文章的地方,请看下面的代码:
 

//获取原窗口的高度
var originalHeight=document.documentElement.clientHeight ||document.body.clientHeight;
window.onresize=function(){
    //键盘弹起与隐藏都会引起窗口的高度发生变化
    var  resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;
     1. 从app自身的Webview高度方面去考虑
        if(resizeHeight-0<originalHeight-0){ // resizeHeight<originalHeight证明窗口被挤压了
         plus.webview.currentWebview().setStyle({
          height:originalHeight //强设置为原高度
         });
      }
     2. 从h5自身角度去解决
    if(resizeHeight-0<originalHeight-0){ // resizeHeight<originalHeight证明窗口被挤压了
       可以去操作dom 进行隐藏按钮  // xxx.style.display='none';
       //隐藏的手段就有很多了 可以z-index为负数、opacity透明度等等
      }else{
       还原按钮的显示 // xxx.style.display='';
      }
}

andriod中如何监听软键盘的弹起与收起,是利用的窗口的高度发生变化 
window.onresize事件来做突破点的,但是ios中软键盘的弹起收起并不触发window.onresize事件。 
总结: 
1.在ios中软键盘弹起时,仅会引起$(‘body’).scrollTop值改变,但是我们可以通过输入框的获取焦点情况来做判断,但也只能在ios中采用这个方案,因为在android中存在主动收起键盘后,但输入框并没有失焦,而ios中键盘收起后就会失焦; 
2.在android中软键盘弹起或收起时,会改变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){
         //当软键盘弹起,在此处操作
          $("#ibo-window-bottom").css("display","none"); //隐藏按钮
         }else{
         //当软键盘收起,在此处操作
          $("#ibo-window-bottom").css("display","block");//显示按钮
         }
}


二、ios
focusin和focusout支持冒泡,对应focus和blur, 使用focusin和focusout的原因是focusin和focusout可以冒泡,focus和blur不会冒泡,这样就可以使用事件代理,处理多个输入框存在的情况。
 document.body.addEventListener('focusin', () => {
            //软键盘弹出的事件处理
            if(isIphone()){

            }
        })
  document.body.addEventListener('focusout', () => {
       //软键盘收起的事件处理
        if(isIphone()){

        }
   })

 

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值