make enter key在用户遍历使用键后选择下拉元素

Question

我有一个像下面这样的自定义角4下拉元素。

<div class="se-box se-box-val newMarginBottom"> 
    <section class="custom-selectbox-wrap" tabindex="0"> 
     <span tabindex="-1" class="fa fa-sort-desc fa-2x custom-selectbox-arrow newArrowClass" id="quick-search-drop2" (click)="SearchDropDown =!SearchDropDown;"></span> 
     <input (keydown)="eventHandler($event)" readonly="readonly" type="text" id="correspondSelectTime" name="correspondSelectTime" class="custom-selectbox newHeightClass" (click)="SearchDropDown =!SearchDropDown;" [(ngModel)]="SearchDropDownText" /> 
     <div class="lfg-ca-chosen-drop quick-search-drop" *ngIf="SearchDropDown" tabindex="-1"> 
      <ul class="chosen-results custom-selectbox-list-cont customized-dropDown-active"> 
       <li tabindex="0" *ngFor="let option of mockdata;let idx=index" #dropdown name=idx title="{{option.text}}" class="active-result" [ngClass]="{'displaynone':SearchDropDownText==option.text }" (focus)="focused(option)" (click)="selectDropdown(option)">{{option.text}}</li> 
      </ul> 
     </div> 
    </section> 
</div> 


import { 
    Component, 
    ElementRef, 
    OnInit, 
    Input, 
    Output, 
    EventEmitter, 
    DoCheck, 
    KeyValueDiffers 
} from '@angular/core'; 

@Component({ 
    selector: 'app-simple-dropdown', 
    templateUrl: './simple-dropdown.component.html', 
    styleUrls: ['./simple-dropdown.component.styl'], 
    host: { 
     '(document:click)': 'onwindowClick($event)', 
    }, 
}) 
export class SimpleDropdownComponent implements OnInit { 

    @Input() mockdata: object; 
    @Output() dropdownData: EventEmitter <any>= new EventEmitter(); 
    SearchDropDown: boolean; 
    SearchDropDownText: string; 
    SearchPlaceHolder: string; 
    SearchDropDownVal: string; 
    differ: any; 
    focusedIdx: number; 
    constructor(private differs: KeyValueDiffers, private _eref: ElementRef) { 
     this.differ = differs.find({}).create(null); 
    } 

    ngOnInit() { 
     this.SearchDropDown = false; 
     this.focusedIdx = 0; 
    } 
    eventHandler(event) { 
     // console.log(event, event.keyCode); 

     // console.log(this.SearchDropDown) 
     console.log(event.keyCode); 
     if (event.keyCode == 40) { 
      event.stopPropagation(); 
      this.SearchDropDown = true; 
      console.log(event); 
      // console.log(event.srcElement.nextElementSibling) 
      // console.log("in event") 
     } 
    } 
    handleKeyEvent(event: Event): void { 
     this.focusedIdx++; 
     console.log('working here'); 
    } 

    onwindowClick(event) { 
     if (!this._eref.nativeElement.contains(event.target)) 
      this.SearchDropDown = false; 
    } 
    ngDoCheck() { 
     var changes = this.differ.diff(this.mockdata); 
     if (changes) { 
      this.SearchDropDownText = this.mockdata[0].text; 
      this.SearchDropDownVal = this.mockdata[0].value; 
      this.SearchPlaceHolder = this.mockdata[0].placeHolder;; 
     } 
    } 

    selectDropdown(option) { 
     this.SearchDropDown = false; 
     this.SearchDropDownText = option.text; 
     this.SearchDropDownVal = option.value; 
     this.SearchPlaceHolder = option.placeHolder; 
     let data = { 
      "SearchDropDownText": this.SearchDropDownText, 
      "SearchDropDownVal": this.SearchDropDownVal, 
      "SearchPlaceHolder": this.SearchPlaceHolder 
     }; 
     this.dropdownData.emit(data); 


    } 



} 

这工作得很好。但我无法添加回车键事件，以便用户使用向上和向下箭头并使用回车键选择li元素。

Answer 1

您可扩展功能来处理enter：

eventHandler(event) { 
    // console.log(event, event.keyCode); 
    // console.log(this.SearchDropDown) 
    // console.log(event.keyCode); 
    if (event.keyCode == 40) { 
     event.stopPropagation(); 
     this.SearchDropDown = true; 
     // console.log(event); 

     if(this.focusedIdx >= -1 && (this.focusedIdx < this.mockdata.length)){ 
      this.focusedIdx++; 
     } 
     else{ 
      this.focusedIdx = 0; 
     } 

     // console.log(event.srcElement.nextElementSibling) 
     // console.log("in event") 
    } 
    if (event.key == "ArrowUp") { 
     event.stopPropagation(); 
     this.SearchDropDown = true; 
     // console.log(event); 

     if(this.focusedIdx > -1 && (this.focusedIdx != 0)){ 
      this.focusedIdx--; 
     } 
     else{ 
      this.focusedIdx = this.mockdata.length - 1; 
     } 

     // console.log(event.srcElement.nextElementSibling) 
     // console.log("in event") 
    } 

    if (event.code == "Enter" && this.focusedIdx > -1){ 
     event.stopPropagation(); 
     this.selectDropdown(this.mockdata[this.focusedIdx]); 
    } 
} 

setIndex(index){ 
    this.focusedIdx = index; 
} 

resetIndex(){ 
    this.focusedIdx = -1; 
} 

HTML变化：

<li tabindex="0" 
    *ngFor="let option of mockdata;let idx=index" 
    #dropdown name=idx 
    class="active-result" 
    ngClass]="{'highlight-row' : idx == focusedIdx }" 
    (mouseenter)="setIndex(idx)" 
    (mouseleave)="resetIndex()" 
    (click)="selectDropdown(option)"> 
    {{option.text}} 
</li> 

CSS的亮点：

.highlight-row{ 
    background-color: #5bc0de; 
    border-color: #46b8da; 
    color: #FFFFFF; 
} 

demo