单击文本框时如何在 IONIC 2 中隐藏本机 android 键盘？答案

【问题标题】：How to hide native android keyboard in IONIC 2 when clicking on a text box?单击文本框时如何在 IONIC 2 中隐藏本机 android 键盘？
【发布时间】：2020-05-22 00:14:45
【问题描述】：

如何在使用 IONIC 2 单击文本框时隐藏原生 android 键盘？我已经从 https://ionicframework.com/docs/native/keyboard/ 链接安装了 IONIC 键盘插件并使用 this.keyboard.close(); 但键盘仍在打开。帮助我如何关闭键盘。我基本上是在 TEXTBOXenter image description here 中的 datepicker 插件中显示 DOB。

这是 ts 文件（datepicker1.ts）

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
    import { DatePicker } from '@ionic-native/date-picker';
    import { Keyboard } from '@ionic-native/keyboard';
    @IonicPage()
@Component({
  selector: 'page-datepicker1',
  templateUrl: 'datepicker1.html',
})
export class Datepicker1Page {
  public today:any;
  constructor(public navCtrl: NavController, public navParams: NavParams,private datePicker: DatePicker,private keyboard: Keyboard) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad Datepicker1Page');
  }
  openDatepicker()
  {

    this.keyboard.close();
    this.datePicker.show({
      date: new Date(),
      mode: 'date',
      androidTheme: this.datePicker.ANDROID_THEMES.THEME_DEVICE_DEFAULT_LIGHT
    }).then(
      date => {
        this.today=date.getDate()+'/'+date.getMonth()+'/'+date.getFullYear()},
      err => console.log('Error occurred while getting date: ', err)
    );
  }

}

这是 datepicker1.html 页面

<ion-header>
  <ion-navbar>
    <ion-title>datepicker page</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
    <ion-item>
        <ion-label>DOB</ion-label>
        <ion-input type="text" name="DOB" (click)="openDatepicker()" [(ngModel)]="today" ng-readonly></ion-input>
      </ion-item>
</ion-content>

【问题讨论】：

如何在没有键盘的情况下在文本框中输入文本？
从 ts 文件中没有，我将放置出生日期。这是将从日期选择器中选择的 dob 字段。
将其保留为 div 标签而不是文本框，这样键盘将不会打开，您可以将日期值传递给 div
从 div 标签调用函数 openDatepicker() ，但它不起作用。它仅适用于文本框。为什么会这样？

标签： ionic2

【解决方案1】：

您错过了在类中声明today 变量，并且您错过了在ion-input 标记中添加disabled="true"。一切正常，我已经测试过了。

TS 文件

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Keyboard } from '@ionic-native/keyboard';
import { DatePicker } from '@ionic-native/date-picker';

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

  constructor(public navCtrl: NavController, public keyboard : Keyboard, public datePicker : DatePicker) {

  }

  today : any;
  openDatepicker(){
    this.keyboard.close();
    this.datePicker.show({
      date: new Date(),
      mode: 'date',
      androidTheme: this.datePicker.ANDROID_THEMES.THEME_DEVICE_DEFAULT_LIGHT
    }).then(
      date => {
        this.today=date.getDate()+'/'+date.getMonth()+'/'+date.getFullYear()},
      err => console.log('Error occurred while getting date: ', err)
    );
  }

}

HTML 文件

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-item>
      <ion-label>DOB</ion-label>
      <ion-input disabled="true" type="text" name="DOB" (click)="openDatepicker()" [(ngModel)]="today" ng-readonly></ion-input>
    </ion-item>
</ion-content>

【讨论】：

我为您的用例创建的示例应用程序github.com/PrithiviRajG/Ionic-3-Native-Date-Picker-example
你能解决这个问题吗？
我突然病了。我会让你知道。请不要介意。

【解决方案2】：

1) import { DatePicker } from '@ionic-native/date-picker/ngx'; 在 app.module.ts 和 keyboard.page.ts 中

2) public keyboard : Keyboard, 在你的构造函数中注入

3)https://ionicframework.com/docs/native/keyboard取自本官网参考

openDatepickerStart(){

    setTimeout(() => {
      this.keyboard.hide();
    }, 100);

    this.datePicker.show({
      date: new Date(),
      mode: 'date',
      androidTheme: this.datePicker.ANDROID_THEMES.THEME_DEVICE_DEFAULT_LIGHT
    }).then(
      date => {
        this.SelectDateModelDetails.get('StartTime').patchValue(date.getDate()+'/'+date.getMonth()+'/'+date.getFullYear())},
      err => console.log('Error occurred while getting date: ', err)
    );
  }

【讨论】：