javascript - 在 Ionic 中触发输入时关闭 Android 设备中的键盘

Question

我正在为日期选择器使用 syncfusion ej2 日历插件，但在这里我只使用范围级别，例如:今天或 1 个月或该插件的过去 7 天选项。所以插件本身会在我触发日历时提供下拉选项。

<div class="Datepicker" >
            <ejs-daterangepicker id='daterangepicker'  [(ngModel)]='value' placeholder='Select a range' [startDate]='start' [endDate]='end' [min]='minDate_s' [max]='maxDate_s' [minDays]='minDays' [maxDays]='maxDays'(change)="eJSGetDates($event)">
                <e-presets>
                    <e-preset label="Today" [start]='today' [end]='today'></e-preset>
                    <e-preset label="Yesterday" [start]='yesterday' [end]='yesterday'></e-preset>
                    <e-preset label="This Week" [start]='weekStart' [end]='weekEnd'></e-preset>
                    <e-preset label="This Month" [start]='monthStart' [end]='monthEnd'></e-preset>
                    <e-preset label="Last Month" [start]='lastStart' [end]='lastEnd'></e-preset>
                </e-presets>
            </ejs-daterangepicker>
        </div>
    </div>

但问题是当我调用显示日期选择器键盘但我不想触发键盘时，我想在触发日历时隐藏键盘。

Answer 1

您可以导入原生插件keyboard来手动显示或隐藏keyboard，您可以试试这个

使用此命令安装插件 ionic cordova plugin add cordova-plugin-ionic-keyboard

导入插件并将它们添加到您的 ts 文件中的 constructor()

import { Keyboard } from '@ionic-native/keyboard';

constructor(private keyboard: Keyboard) { }

添加一个函数，当你点击控件时，焦点事件触发，这个函数被调用 并隐藏键盘

focusEvent(){
this.keyboard.hide();
}

在 html 中

<div class="Datepicker" >
            <ejs-daterangepicker id='daterangepicker' (focus)="focusEvent()" [(ngModel)]='value' placeholder='Select a range' [startDate]='start' [endDate]='end' [min]='minDate_s' [max]='maxDate_s' [minDays]='minDays' [maxDays]='maxDays'(change)="eJSGetDates($event)">
                <e-presets>
                    <e-preset label="Today" [start]='today' [end]='today'></e-preset>
                    <e-preset label="Yesterday" [start]='yesterday' [end]='yesterday'></e-preset>
                    <e-preset label="This Week" [start]='weekStart' [end]='weekEnd'></e-preset>
                    <e-preset label="This Month" [start]='monthStart' [end]='monthEnd'></e-preset>
                    <e-preset label="Last Month" [start]='lastStart' [end]='lastEnd'></e-preset>
                </e-presets>
            </ejs-daterangepicker>
        </div>
    </div>

在这里引用键盘插件的文档keyboard plugin