Angular2离子2保持键盘弹出

Question

我正在构建一个聊天应用程序，在该应用程序中，将离子脚用作文本框 发送按钮。当我在输入框上点击时，键盘弹出式弹出式弹出式弹出率都很好。但是，当我点击发送按钮时，键盘会下降，对于最终用户来说，它成为令人沮丧的体验。

我知道它会发生，因为键盘松散了焦点，而离子将其推向下来。但是，这不是我想要的。如何保留键盘，直到我真正按下发送按钮为止。

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

我也尝试使用离子本机键盘，但没有起作用。