慕哥9229398
2021-11-25 15:51:44
我正在使用ng-select庫。在多選中,選中復選框后,我需要有一個自定義提交按鈕。一切正常,但由于鍵盤導航非常重要,我想專注于 TAB 按下時的提交按鈕。這是我的代碼:模板: <ng-container > <ng-select #entitySelector (remove)="onEntityChange($event)" [items]="people$ | async" [multiple]="true" bindLabel="name" [closeOnSelect]="false" bindValue="name" [(ngModel)]="tempSelectList" [virtualScroll]="true" placeholder="Search People" (keydown.Tab)="onTabPress($event)" > <ng-template ng-option-tmp let-item="item" let-item$="item$" let-index="index"> <input id="item-{{index}}" type="checkbox" [ngModel]="item$.selected" /> {{item.name}} </ng-template> <ng-template ng-footer-tmp> <input type="submit" id="selectEntityBtn" value="Select" #selectEntityBtn class="btn btn-default select-button" (click)="saveData()"/> </ng-template> </ng-select> </ng-container>TS: onTabPress() { var that = this; setTimeout(() => { that.entitySelector.open(); // that.selectEntityBtn.nativeElement.focus(); document.getElementById("selectEntityBtn").focus(); }, 1); }
2 回答

拉莫斯之舞
TA貢獻1820條經驗 獲得超10個贊
您需要event.preventDefault()禁用瀏覽器上的默認選項卡行為,請嘗試以下操作:
onTabPress(event) {
var that = this;
setTimeout(() => {
that.entitySelector.open();
// that.selectEntityBtn.nativeElement.focus();
document.getElementById("selectEntityBtn").focus();
}, 1);
event.preventDefault();
}

泛舟湖上清波郎朗
TA貢獻1818條經驗 獲得超3個贊
請嘗試以下操作:
onTabPress($event) {
var that = this;
$event.preventDefault();
setTimeout(() => {
that.entitySelector.open();
// that.selectEntityBtn.nativeElement.focus();
document.getElementById("selectEntityBtn").focus();
}, 1);
}
我認為您需要防止默認選項卡行為 :) 您需要傳遞該事件。
添加回答
舉報
0/150
提交
取消