Question

我们的团队创建了一个有角度的下拉组件，该组件也可以在iPad上完美运行！

用户有机会输入一些文本，并且控件在建议列表中提供了可能的结果。

dropDown的主要部分（我们称其为autosuggest-control）

用户可以在其中输入搜索文本的文本框
直接在文本框右侧的按钮，用户可以在其中切换建议列表（以防用户希望在不输入搜索文字的情况下查看结果）
出现在文本框底部的建议列表。

挑战/目标：当用户离开控件时，建议应消失！

我们的工作：我们捕获了一组onKeyPress-事件，用于输入文本框，例如使用建议列表内的箭头键在中导航。然后我们按Tab键即可隐藏建议列表。

我们目前无法执行的操作：在文本框中触发了模糊事件后，无法隐藏建议列表。为什么？

时将触发模糊事件

用户单击按钮
用户单击建议列表中的一项。

如果我将其隐藏在输入控件的blur事件中，则会首先触发blur事件，因为建议列表不再可用，因此不会处理click事件...

对于桌面用户而言，一切正常。但是对于安装了野生动物园的iPad用户，控制效果并不理想。 iPad用户使用右侧sido键盘顶部的箭头键在控件之间切换或导航。

问题：我无法捕获onKeyDown-该箭头键的事件！如何识别用户已按下箭头键？

<ng-container *ngIf="state$ | async as state">
    <div class="auto-suggest-container"
         [ngClass]="{ 'disabled' : disabled, 'active': active, 'has-focus' : active && !readonly}">
        <div #inputgroup
             class="auto-suggest-input-group">
            <input #input
                   class="input-control"
                   #input
                   type="text"
                   autocomplete="off"
                   autocorrect="off"
                   autocapitalize="off"
                   [disabled]="disabled"
                   (focus)="onFocus($event)"
                   (blur)="onBlur()"
                   (keydown)="inputOnKeydown($event)"
                   [(value)]="state.searchValue"
                   (keyup)="onKeyUp($event)"
                   tabindex="{{ tabindex }}"
                   placeholder="{{placeholder}}"
                   [attr.readonly]="readonly ? 'readonly' : null" />
            <button #suffixButton
                    type="button"
                    [disabled]="disabled"
                    (click)="onSuffixClickAsync()"
                    tabindex="-1">
                <div class="arrow-icon"></div>
            </button>
        </div>
    </div>
</ng-container>

<ng-template templateName="selectList"
             let-stateObs="stateObs">
    <ng-container *ngIf="stateObs | async as state">
        <div #dropdown
             class="auto-suggest-dropdown"
             [ngClass]="{'flipped': state.flipped}">
            <div *ngFor="let item of state.items; let itemIndex=index"
                 class="auto-suggest-listitem"
                 (click)="onSuggestionClick(item, $event)"
                 [attr.autosuggest-item-index]="itemIndex"
                 [ngClass]="item.isHighlighted ? 'active-item' : ''">

                <span *ngIf="!state.listItemTemplate">{{ item.stringFormattedValue }}</span>
                <ng-container *ngIf="state.listItemTemplate">
                    <ng-template *ngTemplateOutlet="state.listItemTemplate, context: {item: item.dataItem, index: itemIndex}"></ng-template>
                </ng-container>
            </div>
        </div>
    </ng-container>
</ng-template>

如何捕捉带有移动浏览器的iPad上的箭头按键事件-

0 个答案: