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

Posted 2023-03-13

【中文标题】当 Ionic 中的输入触发时，关闭 Android 设备中的键盘

【英文标题】：Dismiss keypad in Android device when input triggers in Ionic

【发布时间】：2019-07-21 22:34:12

【问题描述】：

我正在为 datepicker 使用 syncfusion ej2 日历插件，但在这里我只使用范围级别 ex：该插件的今天或 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>

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

【问题讨论】：

您使用的是哪个 ionic 版本？

@Sivaramakrishnan 我正在使用 Ionic3。

daterangepicker有没有可用的焦点事件

是的，组件中有一个用 (change)="eJSGetDates($event)" 调用的事件。

如果您选择任何值，就会发出更改事件，对吗？

【参考方案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

【参考方案2】：

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

我为上述问题找到了解决方案 插件 API "allowEdit" 提供了一些属性 如果我们给了allowit=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>