所以我有一個輸入，下面有一個下拉菜單。因此，當我單擊輸入時，下拉菜單將打開。但我無法從下拉列表中選擇任何內容，因為它沒有聚焦。因此，當我單擊一個值時，它不會被選中，并且下拉列表會再次關閉，因為它失去了焦點。所以我現在想知道如何將 div 包含到輸入的焦點中。HTML 輸入：<input type="text" class="form-control myInput" [(ngModel)]="textToSort"(keyup)="onKeyDownAction($event)" (blur)="onBlurEventAction()" id="{{id}}" (focus)="focusFunction()" (focusout)="unFocusFunction()"/>HTML div（下拉菜單）：<div class="data-container" *ngIf="showDropDown" style="position: absolute;" > <p *ngFor="let data of dataList; let i = index" class="data-list" (click)="updateTextBox(i,data[columnName]); focusOnInput();" [ngClass]="{highlight:checkHighlight(i)}" > {{data[columnName]}}</p></div>成分：focusFunction(){ this.showDropDown = true; }unFocusFunction() { this.showDropDown = false; }
3 回答
千萬里不及你
TA貢獻1784條經驗 獲得超9個贊
blurinput由于mousedown列表項，您發生了事件
所以為了防止這種情況你需要添加
(mousedown)="$event.preventDefault()"
您的列表項的處理程序。我創建了簡單的演示：
https://stackblitz.com/edit/angular-x3cdr1
Smart貓小萌
TA貢獻1911條經驗 獲得超7個贊
最簡單的方法如下：
focusFunction(){
this.showDropDown = true;
}
unFocusFunction() {
setTimeout(() => { this.showDropDown = false; }, 500);
}
我認為檢查這個 stackblitz 也會有幫助： https://stackblitz.com/edit/angular-search-filter ?file=app%2Fapp.component.ts
- 3 回答
- 0 關注
- 208 瀏覽
添加回答
舉報
0/150
提交
取消