Ionic4--输入框键盘遮挡问题

最新推荐文章于 2022-11-17 11:46:43 发布

原创最新推荐文章于 2022-11-17 11:46:43 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

Ionic 专栏收录该内容

38 篇文章

订阅专栏

本文探讨了解决移动端Web应用中键盘遮挡输入框及底部栏的问题，提供了两种方案：利用ionFocus和ionBlur监听输入框焦点变化，以及通过$(window).resize监听窗口尺寸变化。详细介绍了每种方案的实现代码和可能遇到的问题。

问题：键盘遮挡输入框、底部栏和键盘一起移动

方案一：ionFocus、 ionBlur 监听输入框的焦点获取

HTML

 <ion-input placeholder="请输入用户名" [(ngModel)]="username" (ionFocus)="focusInput()" (ionBlur)="blurInput()">

focusInput() {
    document.body.scrollTop = document.body.scrollHeight;
}

blurInput() {
    document.body.scrollTop = this.bfscrolltop;
}

结论：键盘不会被遮挡

产生的问题：1、footer也跟着一起上升了。2、安卓键盘的键盘回收按钮，不会触发上面的方法。3、方法中的document.body.scrollTop的大小对安卓没有影响

方案二：$(window).resize监听页面变化

var windheight = $(window).height();  /*未唤起键盘时当前窗口高度*/
var that = this

//底部栏加在content下面，不使用footer了，监听键盘弹出后隐藏，收起后显示

$(window).resize(function(){
      var docheight = $(window).height();  /*唤起键盘时当前窗口高度*/  
 
      if(docheight < windheight){            /*当唤起键盘高度小于未唤起键盘高度时执行*/
        $('.bottomVersion').css("opacity", 0);
        $('.bottomVersion').css("height", 0);
       
        document.body.scrollTop = document.body.scrollHeight;
        that.content.scrollToBottom()//安卓App键盘弹出，还是会遮住输入框，但是输入的时候会上升，所以使用ion-content的方法，自动滚动到最后一行。

      }else{
        setTimeout(() => {//加入延时，不然底部栏会先出现，展示效果不好
          document.body.scrollTo(0,0);
          $('.bottomVersion').css("opacity", 1);
          $('.bottomVersion').css("height", "60px");
          document.body.scrollTop = 0;
        }, 200);
        
      }           
 });

focusInput() {
    //不加这个方法，iOS浏览器的键盘就不会弹出
   document.body.scrollTo(0,80);///目前仅在iOS浏览器有作用

}