In Ionic 2, wie man ein Element über der Tastatur schweben lässt, wenn die Tastatur zeigt?

Question

Ich möchte, dass meine Nachrichteneingabebalken über der Tastatur schweben, wenn die Tastatur anzeigt, aber es sieht so aus, als ob es in Ionic 2 noch keine keyboard-attach directive (like v1) gibt (maybe in the works?). Gibt es eine Alternative/Workaround?

Aktuelles Verhalten:

Gewünschtes Verhalten:

Hier ist der Code meiner Nachricht Eingabeleiste:

<ion-toolbar position="bottom" *ngIf="userIsAdmin"> 

    <form (ngSubmit)="onSubmit(f)" #f="ngForm" class="message-form"> 

     <ion-badge class="message-form-badge">Admin</ion-badge> 

     <ion-input type="text" placeholder="Type a message..." ngControl="messageInput"></ion-input> 

     <button type="submit" small class="message-form-button">Send <ion-icon name="send"></ion-icon></button> 

    </form> 

</ion-toolbar> 

Answer 1

fand ich eine Lösung, die für mich auf IOS funktioniert.

Wenn Sie die <ion-item> mit <ion-input> im Browser überprüfen (Debugging für IOS Safari verwenden) Sie, dass die ionische finden erzeugt ein <div class='input-cover'> die position: absolute; den Stil hat.

schreiben CSS, die diese wie unten

.input-cover { 
    position: static; 
} 

Dies überschreibt hat den Trick für mich und jetzt, wenn Sie konzentrieren sich auf ein Eingabefeld, es blättert in Sicht und versteckt nicht unter der Tastatur mehr und das alles funktioniert butterweich.

Answer 2

ich auch nee habe Ded um dies zu implementieren. Ich habe es getan und es funktioniert perfekt.

1. Sie müssen Cordova Plugins Tastatur verwenden, und beim Start cordova.plugins.Keyboard.disableScroll(true); anrufen, so dass die Tastatur Ihre Ansicht nicht schieben wird. 2. Sie auf keyboardshow und Tastatur verstecken Veranstaltungen wie diese mit den Handler hören:

cordova.plugins.Keyboard.disableScroll(true); 
        window.addEventListener('native.keyboardshow', this.dispatchMe); 
        window.addEventListener('native.keyboardhide', this.dispatchMeHide); 

    dispatchMe(e) { 
     var event = new CustomEvent('keyboardShown'); 
     event['keyboardHeight'] = e.keyboardHeight; 
     document.dispatchEvent(event); 
    } 

    dispatchMeHide() { 
     var event = new CustomEvent('keyboardShown'); 
     event['closed'] = true; 
     document.dispatchEvent(event); 
    } 

als Sie eine beobachtbare von Veranstaltung wie diese machen kann:

this.keyboardObservable = Observable.fromEvent(document, 'keyboardShown'); 

als Sie das hören beobachtbar. Wenn die Tastatur geöffnet ist, ändern Sie die Höhe des Containers, in dem Ihre Nachrichten angezeigt werden. Sie müssen es im Grunde für die Höhe der Tastatur niedriger machen. Hier ist, wie ich tat,

this.chatService.keyboardObservable 
      .subscribe(data => { 
       if (data.closed) { 
        this.sectionHeight = 85 + '%'; 
        this.inputBottom = 0 + '%'; 
       } 
       else { 
        this.docHeight = document.body.clientHeight; 
        this.sectionHeight = ((this.docHeight - data.keyboardHeight - (document.getElementById('toptoolbar').clientHeight + document.getElementById('inputchat').clientHeight))/this.docHeight) * 100 + '%'; 
        this.inputBottom = data.keyboardHeight/this.docHeight * 100 + '%'; 
       } 

      }); 

und Sie diese Eigenschaften mit ngstyle ändern wie diese

[ngStyle]="{'height': sectionHeight}" 

ich dies auch für chatapp gebraucht, und jetzt funktioniert es perfekt (auch wenn Sie den Bildschirm Porträt drehen/Querformat-Modus), der Eingang schwebt immer über der Tastatur, genau wie in den nativen Apps :)

Ich hoffe, das wird Ihnen helfen!

Answer 3

Die Lösung, die ich mit und ein bis zu Ende, die ich mit zufrieden bin ist:

1. Keyboard.disableScroll(true); Entfernen perfekt jetzt
2. eine regelmäßige <input type="text"> anstelle von <ion-input type="text">

Works!

Answer 4

Ich hatte dieses Problem mit Android, also habe ich eine Service-Methode erstellt, die ich in einzelne Komponenten einfügen konnte. Es basiert auf der Verwendung von <ion-input> Feldern innerhalb eines <ion-content> Tags.

Dies nutzt die setScrollTop-Methode, die der Content-Klasse hinzugefügt wurde.

Dienst

export class KeyboardService { 

    autoKeyboardScroll(content:Content, scrollBackAfterKeyboardClose?:boolean) { 
     if (!content) { 
      return; 
     } 
     var previousScrollTop = null; 
     function onKeyboardShow(e) { 
      // if the content no longer exists, stop the listener 
      if (removeListenersForMissingContent()) { 
       return; 
      } 
      previousScrollTop = content.getScrollTop(); 
      // find the input that's currently in focus 
      var focusedElement = document.activeElement; 
      if (focusedElement && ['INPUT', 'TEXTAREA'].indexOf(focusedElement.tagName)!==-1) { 
       // determine the total offset between the top of the "ion-content" and this element. 
       // we will do this by climbing up the dom until we reach the "ion-content" 
       var offsetTop = focusedElement.offsetTop + focusedElement.scrollHeight; 
       var parentEl = focusedElement.offsetParent; 
       while (parentEl && parentEl.tagName!=='ION-CONTENT') { 
        offsetTop += parentEl.offsetTop; 
        parentEl = parentEl.offsetParent; 
       } 
       // we want to move the input so that the bottom of the focused input is just above the keyboard 
       var contentDimensions = content.getContentDimensions(); 
       var newScrollTop = offsetTop - (contentDimensions.contentHeight - focusedElement.scrollHeight); 
       content.setScrollTop(newScrollTop); 
      } 
     } 
     function onKeyboardHide(e) { 
      // if the content no longer exists, stop the listener 
      if (removeListenersForMissingContent()) { 
       return; 
      } 
      // set the scroll top back to the initial position, if requested 
      if (scrollBackAfterKeyboardClose) { 
       content.setScrollTop(previousScrollTop); 
      } 
     } 
     function removeListenersForMissingContent() { 
      // if there is no content, remove the keyboard listeners 
      if (!content || content.getContentDimensions().contentHeight===0) { 
       window.removeEventListener('native.keyboardshow', onKeyboardShow); 
       window.removeEventListener('native.keyboardhide', onKeyboardHide); 
       return true; 
      } 
     } 
     // setup listeners 
     window.addEventListener('native.keyboardshow', onKeyboardShow); 
     window.addEventListener('native.keyboardhide', onKeyboardHide); 
    } 
} 

Komponente

@Component({ 
    template: `<ion-content> 
     <ion-list> 
      <ion-item> 
       <div style="height: 400px"></div> 
      </ion-item> 
      <ion-item> 
       <ion-label>Field 1</ion-label> 
       <ion-input type="text"></ion-input> 
      </ion-item> 
      <ion-item> 
       <ion-label>Field 2</ion-label> 
       <ion-input type="text"></ion-input> 
      </ion-item> 
      <ion-item> 
       <ion-label>Field 3</ion-label> 
       <ion-input type="text"></ion-input> 
      </ion-item> 
      <ion-item> 
       <ion-label>Field 4</ion-label> 
       <ion-input type="text"></ion-input> 
      </ion-item> 
      <ion-item> 
       <ion-label>Field 5</ion-label> 
       <ion-input type="text"></ion-input> 
      </ion-item> 
      <ion-item> 
       <ion-label>Field 6</ion-label> 
       <ion-input type="text"></ion-input> 
      </ion-item> 
     </ion-list> 
    </ion-content>` 
}) 
export class MyPage { 
    @ViewChild(Content) content: Content; 

    constructor(private: keyboardService: KeyboardService) {} 

    // add the keyboard scroll action to this page. this is added after the view has been created, 
    // so the content element will be avaialble. 
    ionViewDidEnter() { 

     // timeout seems to be required, to ensure that the content child is available 
     setTimeout(() => { 
      // set the keyboard to auto-scroll to the focused input, when it opens 
      this.keyboardService.autoKeyboardScroll(this.content); 
     }); 
    } 
}