首页 文章

ios上的Ionic3键盘问题

提问于
浏览
2

Cordova CLI:6.5.0 Ionic Framework版本:3.0.1 Ionic CLI版本:2.2.3 Ionic App Lib版本:2.2.1 Ionic App脚本版本:1.3.0 ios-deploy版本:未安装ios-sim版本:未安装操作系统:Windows 7节点版本:v6.10.2 Xcode版本:未安装

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

我曾尝试在离子原生的Keyboard类上调用close(),但这只会缩小屏幕,使屏幕底部的标签显示在键盘顶部,键盘保持向上 .

我尝试过使用onKeyboardShow()但是从未调用过 .

我已经尝试将键盘放在配件栏上,但这在真实设备上不起作用 . (附件栏没有出现)

如果有任何方法可以向键盘添加关闭功能或使返回按钮关闭键盘,那将是很好的,否则如果keyboard.close()可以按照它应该的方式工作也会很好 .

这是我的页面类的一部分,以显示我正在正确调用Keyboard类:

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

1 回答

  • 1

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

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

    和:

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

相关问题