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>

<强>解决方案 -

使用jQuery -

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

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

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

我也尝试使用Ionic native Keyboard，但没有效果。

angular2离子2保持键盘弹出

2 个答案: