所以我有一個輸入，下面有一個下拉菜單。因此，當(dāng)我單擊輸入時，下拉菜單將打開。但我無法從下拉列表中選擇任何內(nèi)容，因為它沒有聚焦。因此，當(dāng)我單擊一個值時，它不會被選中，并且下拉列表會再次關(guān)閉，因為它失去了焦點。所以我現(xiàn)在想知道如何將 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條經(jīng)驗 獲得超9個贊
blurinput由于mousedown列表項，您發(fā)生了事件
所以為了防止這種情況你需要添加
(mousedown)="$event.preventDefault()"
您的列表項的處理程序。我創(chuàng)建了簡單的演示：
https://stackblitz.com/edit/angular-x3cdr1
Smart貓小萌
TA貢獻1911條經(jīng)驗 獲得超7個贊
最簡單的方法如下：
focusFunction(){
this.showDropDown = true;
}
unFocusFunction() {
setTimeout(() => { this.showDropDown = false; }, 500);
}
我認(rèn)為檢查這個 stackblitz 也會有幫助： https://stackblitz.com/edit/angular-search-filter ?file=app%2Fapp.component.ts
阿晨1998
TA貢獻2037條經(jīng)驗 獲得超6個贊
您是否在 CSS 中嘗試將下拉類展開時的 z-index 設(shè)置為 1？
請分享 plunkr 或 stackblitz 鏈接來查看該場景。
- 3 回答
- 0 關(guān)注
- 232 瀏覽
添加回答
舉報
0/150
提交
取消