angular2 ionic 2保持鍵盤彈出

Question

我正在構建一個聊天應用程序，其中ion-footer用作文本框+發送按鈕。 當我點擊輸入框時，鍵盤會根據需要很好地彈出。 但是，當我點擊“發送”按鈕時，鍵盤會掉下來，這對於最終用戶來說是一種令人沮喪的體驗。

我了解這是由於鍵盤松開了焦點，而離子鍵將其按下而導致的。 但是，這不是我想要的。 在我真正按下發送按鈕之前，如何保持鍵盤原樣。

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

設置焦點將打開鍵盤備份。

設置參考：

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

連接參考類：

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

設置焦點：

this.sendInput.setFocus();

Answer 2

如果要在輸入字段之外點擊，則需要從被點擊的元素觸發事件。

例如，在我的應用程序中，“輸入/消息”字段會生成自動建議（不在焦點范圍內）。 單擊建議不應隱藏鍵盤。

當任何建議被點擊時，我將觸發一個函數/事件public setInput(value){ } 。

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>

解決方案-

1. 使用jQuery-

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

.message-form是container form元素的類名。

2. 角度-

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

我也嘗試使用Ionic本機Keyboard ，但是沒有用。