angular2離子2保持鍵盤彈出

我正在構建一個聊天應用程序，其中ion-footer用作文本框+發送按鈕。當我點擊輸入框時，鍵盤彈出很好，因爲我需要。然而，當我點擊發送按鈕時，鍵盤會關閉，這對最終用戶來說是一種令人沮喪的體驗。angular2離子2保持鍵盤彈出

我明白這發生在鍵盤失去焦點時，離子將它推下。然而，這不是我想要的。如何保持鍵盤不變，直到我確實按下發送按鈕。

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>

來源

2017-06-03 Vik

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

設置參考：

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

連接參考類：

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

設置重點：

this.sendInput.setFocus();

來源

2017-06-05 06:50:31 misha130

什麼是TextInput？它是一個angular2模塊嗎？找不到。另外我應該手動設置焦點？理想情況下，如果我點擊頁腳區域內的任何地方，鍵盤應該保持焦點。 – Vik

如果你想輸入字段以外的挖掘，你需要從觸發元素觸發事件。

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

當我點擊任何建議時，我在觸發一個功能/事件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>

解決方案 -

使用jQuery -

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

釷e .message-form是類別名稱container form元素。

角 -

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 native Keyboard也嘗試，但沒有工作。

來源

2017-08-22 04:38:20

angular2離子2保持鍵盤彈出

回答

相關問題