如果在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

我解决此问题的一种方法是在指示何时打开键盘的身体标签中添加类。

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更改为AdvictPan。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语句可以缩短到语句时，它将达到相同的目的，谢谢。