Add Rand/Fokus zu einer Schaltfläche, wenn eine Tastatur auf ionic3 angezeigt wird

Question

Was ich erreichen möchte, ist entweder Fokus oder alternativ fügen Sie einen unteren Rand zu einer Schaltfläche, nachdem ich auf einen Ionen-Eingang klicken und die Tastatur zeigt, warum Ich mache das, weil die Tastatur den Knopf bedeckt, und der Knopf ist tatsächlich unter dem Ioneneingang, was bedeutet, dass ich die Seite nach meiner Eingabe hochrollen muss.

Was habe ich erreicht zur Zeit ist dies:

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; 
    } 
    } 
} 

seite.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

Nach vielen Stunden des Denkens entscheide ich, so etwas zu tun:

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%"; 
     } 
    } 

    } 

seite.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> 

Ich weiß nicht, ob jemand bekommen Ich ändere einfach den Stil im Fokus oder Onclick, das ist es.

bedeuten, während die if-Anweisung verkürzt werden kann, während Anweisung und es wird den gleichen Zweck dienen, danke.

Answer 2

Ein Weg, ich dieses Problem gelöst war ein hinzufügen Klasse zum body-Tag, das anzeigt, wenn eine Tastatur geöffnet ist.

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'); 
     }); 
    }); 
} 

Und dann in Ihrem CSS

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

---

Es gibt Probleme mit der Tastatur, die Eingabe abdeckt. Eine andere Möglichkeit, die ich behoben habe, war, die Tastatureinstellung so zu ändern, dass sie oben auf der Seite sitzt und nicht nach oben bewegt wird.

In AndroidManifest.xml ändere ich den windowSoftInputMode zu adjustPan. android:windowSoftInputMode="adjustPan"