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保持键盘弹出

回答

相关问题