如果在ionic3上显示键盘，则为按钮添加边距/焦点

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标签上添加一个类，指示键盘何时打开。

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>

我不知道是否有人得到它，我只是改变焦点或onclick上的风格，就是这样。

意味着if语句可以缩短到while语句，它将起到同样的作用，谢谢。