如果 ionic3 上显示键盘，则将 margin/focus 添加到按钮

Question

我想要实现的是在我点击一个离子输入并且键盘出现后，要么聚焦，要么为按钮添加底部边距，为什么我这样做是因为键盘覆盖了按钮，按钮实际上在离子输入下方，这意味着我需要在输入后向上滚动页面。

我目前取得的成果是：

page.ts

export class TestPage {

btnfocus: boolean = false;   

    constructor(public navCtrl: NavController, public navParams: NavParams,public keyboard: Keyboard) {
  }

    isShowing() {
    if(this.keyboard.onKeyboardShow()){
        this.btnfocus = true;
    }else{
        this.btnfocus = false;
    }
  }
}

page.html

<div class="center" id="pinlayout">
                <label class="center">Enter your 4 digit pin to proceed</label>
                <ion-input type="password"></ion-input>
                                <button [style.focus]="btnfocus" class="center" (click)="enterPin()">Proceed</button>
            </div>

Answer 1

我解决这个问题的一种方法是在 body 标签中添加一个 class 来指示键盘何时打开。

import { Keyboard } from '@ionic-native/keyboard';
...

constructor(public keyboard: Keyboard) {
    platform.ready().then(() => {
        this.keyboard.onKeyboardShow().subscribe(() => {
          document.body.classList.add('keyboard-is-open');
        });

        this.keyboard.onKeyboardHide().subscribe(() => {
          document.body.classList.remove('keyboard-is-open');
        });
    });
}

然后在你的 CSS

body.keyboard-is-open {
  button {
    ... add margin ...
  }
}

覆盖输入的键盘存在问题。我解决此问题的另一种方法是将键盘设置更改为位于页面顶部而不是向上移动。

在AndroidManifest.xml中我将windowSoftInputMode改为adjustPan。 android:windowSoftInputMode="adjustPan"

Answer 2

经过几个小时的思考，我决定这样做：

page.ts

  export class TestPage {

    btnmargin = "";
    layoutmargin = "";
    newheight = "";

        constructor(public navCtrl: NavController, public navParams: NavParams,public keyboard: Keyboard) {
      }

      isShowing() {
          this.btnmargin = "15px";
          this.layoutmargin = "30%";
          this.newheight = "auto";
    }
    isGone(){
      if(this.layoutmargin == "30%"){
        this.layoutmargin = "60%";
      }else if(this.layoutmargin == "30%"){
        this.layoutmargin = "60%";
        }
    }

    }

page.html

<div class="center" id="pinlayout" [style.margin-top]="layoutmargin" [style.height]="newheight">
                    <label class="center">Enter your 4 digit pin to proceed</label>
                    <ion-input type="password"></ion-input>
                                    <button [style.margin-top]="btnmargin" class="center" (click)="enterPin()">Proceed</button>
                </div>

不知道有没有人看懂，我就是在focus或者onclick上改一下样式，就这样。

意思是 while if 语句可以缩短为 while 语句，它的作用相同，谢谢。

如果 ionic3 上显示键盘，则将 margin/focus 添加到按钮

Add margin/focus to a button if a keyboard is shown on ionic3

angularjs

hybrid-mobile-app

ionic-framework

ionic2

ionic3