在 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

Answer 2

参考插件文档后API https://ej2.syncfusion.com/angular/documentation/api/daterangepicker/dateRangePickerModel/#allowedit

我找到了解决上述问题的方法插件提供了一些属性 API "allowEdit" 如果我们给了 allowedit=false。我的要求满足了。我们无法更改输入值，但我们可以从模式弹出窗口中选择日期。我们不需要为键盘安装本机插件。

<div class="Datepicker" >
            <ejs-daterangepicker [allowEdit] = 'false' 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>

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

Dismiss keypad in Android device when input triggers in Ionic

javascript

android

typescript

ionic3

angular