angular2 ionic 2 Keeping Tastatur tauchte auf

Question

Ich baue eine Chat-App, bei der der Ion-Footer als Textbox + Sende-Taste verwendet wird. Wenn ich auf das Eingabefeld klicke, erscheint die Tastatur wie gewünscht. Wenn ich jedoch auf die Schaltfläche "Senden" klicke, wird die Tastatur heruntergefahren und es wird für den Endbenutzer zu einer frustrierenden Erfahrung.

Ich verstehe, dass es passiert, wie die Tastatur den Fokus verliert und ionische drückt es nach unten. Dies ist jedoch nicht das, was ich will. Wie behalte ich die Tastatur so lange, bis ich wirklich die Sendetaste drücke?

my current ionic 2 looks like 
<ion-footer padding> 
    <form [formGroup]="chatForm" (ngSubmit)="sendChatMessage()"> 
     <ion-input type="text" formControlName="messageInput" placeholder="start typing..."></ion-input> 
     <ion-buttons end> 
      <button item-right ion-button clear type="submit" [disabled]="chatForm.controls['messageInput'].value === ''"><ion-icon name="ios-send" style="zoom:2.0;"></ion-icon></button> 
     </ion-buttons> 
    </form> 
</ion-footer> 

Answer 1

Der Fokus wird die Tastatur sichern.

Einstellen der Referenz:

<ion-input #sendInput type="text" formControlName="messageInput" placeholder="start typing..."> 
</ion-input> 

Verbindung Bezug auf Klasse:

@ViewChild("sendInput") public sendInput: TextInput; 

Einstellung des Fokus:

this.sendInput.setFocus(); 

Answer 2

Wenn Sie außerhalb von Eingabefeld tippen möchten, müssen Sie Ereignis vom angezapften Element auslösen.

Zum Beispiel erzeugt das Eingabe/Meldungsfeld in meiner App automatische Vorschläge (außerhalb des Fokus). Ein Klick auf Vorschläge sollte die Tastatur nicht verbergen.

Ich trigerring eine Funktion/Ereignis public setInput(value){ }, wenn ein Vorschlag angeklickt wird.

HTML-

<ion-list class="autocomplete-list"> 
    <button ion-item *ngFor="let value of suggestions" (click)="setInput(value)">{{value}}</button> 
</ion-list> 

<ion-input #messageInput name="inputMessage" on-return="sendMessage()"></ion-input> 

Solutions-

1. Mit jQuery -

   setInput(value){ 
       $('.message-form input').focus(); 
   } 
   

Th e .message-form ist der Klassenname container form Element.

2. Angular -

   import { Component, ElementRef, ViewChild } from '@angular/core'; 
   
   export class HomePage { 
       @ViewChild("messageInput") public messageInput: ElementRef; 
   
   setInput(value){ 
       var elem:any = this.messageInput; 
       elem._native.nativeElement.focus(); 
   } 
   

Ich habe auch versucht Ionic native Keyboard mit, aber nicht funktionierte.