iphone - ios 上的 Ionic3 键盘问题

Question

Cordova CLI:6.5.0 ionic 框架版本:3.0.1 ionic CLI 版本:2.2.3 Ionic 应用程序库版本:2.2.1 Ionic 应用程序脚本版本:1.3.0 ios-deploy 版本:未安装 ios-sim 版本: 未安装 操作系统:Windows 7 节点版本:v6.10.2 Xcode版本:未安装

我的 ionic 应用程序的一个屏幕有一个 ionic 搜索栏。 当我的 ionic 应用程序在 iOS 设备上运行时，当用户点击搜索字段时，键盘会按预期出现，但用户无法在不更改屏幕的情况下关闭键盘。

我尝试在 ionic-native Keyboard 类上调用 close() ，但这只会缩小屏幕，以便屏幕底部的选项卡出现在键盘顶部，键盘保持打开状态。

我尝试过使用 onKeyboardShow() 但从未被调用过。

我尝试过将键盘与附件栏一起放置，但这在真实设备上不起作用。 (附件栏不出现)

如果有任何方法可以向键盘添加关闭功能或使返回按钮关闭键盘，那就太好了，否则如果 Keyboard.close() 可以按其应有的方式工作那就太好了。

这是我的页面类的一部分，用于显示我正在正确调用键盘类:

import { Component } from '@angular/core';
import { Validators, FormBuilder, FormGroup } from "@angular/forms";
import { NavController, App, NavParams, AlertController,ModalController,LoadingController   } from 'ionic-angular';
import { Keyboard } from '@ionic-native/keyboard';


import { PressDirective } from "../../components/longpress/longpress";

// Providers
import { ProjectDetailService } from '../../providers/project-detail-service';
import { Globals } from '../../providers/globals';
import { Filters } from '../../providers/filters';

// Pages
import { TabsPage } from '../tabs/tabs';
import { FormPage } from '../form/form';
import { ProjectDetail } from '../project-detail/project-detail';
import { AboutPage } from '../about/about';
import { FiltersPage } from '../filters/filters';

//http://roblouie.com/article/198/using-gestures-in-the-ionic-2-beta/

@Component({
    selector: 'page-list',
    templateUrl: 'list.html'
})
export class ListPage {

    newListItem: FormGroup;
    masterList: any = [];
    list: any = [];
    showAdd:boolean = true;
    showDelete:boolean = true;
    showClear:boolean = true;
    searchQuery:string = "";
    doinglike:boolean = false;
    loading:boolean = true;
    keyboardUp:boolean = false;

    constructor ( public service: ProjectDetailService,
                    public globals: Globals,public filters: Filters,
                    public formBuilder: FormBuilder,
                    public app: App,
                    public navCtrl: NavController,
                    public alertCtrl: AlertController,
                    public modalCtrl: ModalController,
                    private keyboard: Keyboard
                    ,public loadingController: LoadingController ) {

        this.showAdd = this.globals.adminUser;
        this.showDelete = this.globals.adminUser;

console.log("ListPage constructor");

        this.keyboard.close();
        this.keyboard.hideKeyboardAccessoryBar(false);

        this.keyboard.onKeyboardShow().subscribe(data =>
        {
            console.log('keyboard is shown');
            this.keyboardUp = true;
        });

        this.keyboard.onKeyboardHide().subscribe(data =>
        {
            console.log('keyboard is hidden');
            this.keyboardUp = false;
        });
    }

Answer 1

在字段中添加 keyup.enter 事件。例如

 <ion-input type="text" [(ngModel)]="data" (keyup.enter)="hideKeyboard()">             

还有:

 hideKeyboard() {
  // hide keyboard
  this.keyboard.close();
 }