美文网首页
ionic3 软键盘遮住输入框 含全屏显示页面时

ionic3 软键盘遮住输入框 含全屏显示页面时

作者: 猿奇 | 来源:发表于2018-01-05 15:42 被阅读0次

    作者:猿奇
    链接:www.jianshu.com/p/9d8c7b7558d8
    來源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    如有疑问,可评论联系作者,热心解答,从不怼人。。。

    本文主要解决两个坑

    input  && textarea 
    1、软键盘遮住输入框 
    2、全屏显示页面时,软键盘遮住输入框
    

    1、普通软键盘遮住输入框

    让content向上滚动 软键盘的高度

    import { Component, ViewChild } from '@angular/core';
    import { Content } from 'ionic-angular';
    
    @Component({...})
    export class MyPage{
      @ViewChild(Content) content: Content;
    
      scrollTokeyboardHeight() {//让content向上滚动 软键盘的高度
        this.content.scrollTo(0,e.keyboardHeight);
      }
    }
    

    然而……
    有朋友问了:content是没有滚动的,div 设置的overflow: scroll
    div里面有input/textarea 要怎么破?这个简单:

    
    //加上这个就好了
    var scrollDiv= document.getElementById('scrollDiv');
          scrollDiv.scrollTop = scrollDiv.scrollHeight;
    
    

    2、全屏显示页面时,软键盘遮住输入框

    statusBar.hide();//让APP全屏显示
    然而,在有input 框、textarea框在底部的页面,软键盘就遮住了输入框,无法撑起高度,怎么办呢?
    解决思路:
    在focus时, statusBar.show();
    在blur时, statusBar.hide();
    嘎哈,OK了!!!

    有问题评论问作者哟!

    相关文章

      网友评论

          本文标题:ionic3 软键盘遮住输入框 含全屏显示页面时

          本文链接:https://www.haomeiwen.com/subject/orlsnxtx.html