Page refresh - Enter, arrow keys not working in table cells

问题

This problem is happening both in IE and Chrome. This is an HTML 5 with Angular JS 4 application. I am using TypeScript. My main aim in a table row I need to make enter, right, and left arrows of keyboard work and set focus on corresponding table cells

I have a page which has a dropdown. It has names of students. I also have a table with single row like below with multiple columns

When I launch by default a student is selected in dropdown which populates students details in table. I made each cell in row as editable. So when user clicks on any cell in the row and presses enter key I move to next cell and so the functions for right arrow and left arrow are working fine on first load/launch of my application.

But when I change another student from my dropdown, I refresh the page to show new selected student details. From this point if I select a cell in the row my enter key, left, and right arrows are not working. Please see below for my code

Thank you very much in advance.

<table>
   <tr>
     <td *ngFor="let item of student.classes " >
       <!-- I need to use div to make cell editable in IE. -->
       <div name='TotalDistributableQtyCell' [id]="item.cellId" 
           [contentEditable]='!isDisabled' [textContent]="item.value" 
           (keydown)="onKeydown($event, item)" 
           style="line-height:1.8em;">{{item.value}}</div>
     </td>                
  </tr>
<table>

MyComponent.ts

totalDistributableQtyCells: HTMLElement[];

ngAfterViewChecked() {
const distCells = document.getElementsByName('TotalDistributableQtyCell');
if(distCells !== null && distCells !== undefined && distCells.length > 0) {
        if(this.totalDistributableQtyCells === null || this.totalDistributableQtyCells === undefined) {
                this.totalDistributableQtyCells = [];                
            }
            for ( let i = 0 ; i < distCells.length; i++) {
                const index = this.totalDistributableQtyCells.findIndex( x =>  x.id !== undefined && x.id === distCells[i].id);
                    if(index === -1) {
                        this.totalDistributableQtyCells.push(distCells[i]);
                    }
            }
        }
}

private onKeydown(event: any, item: ITotalDistributableQuantity) {     
        const key_code = (window.event) ? event.keyCode : event.which;
        if (this.deviceInfo.browser === 'ie') {
            console.log('ie: event.keyCode ' + event.keyCode);
            switch(event.keyCode.toString()) {
                case '13':  //enter       
                event.preventDefault ? event.preventDefault() : (event.returnValue = false);   
                if(item.sequenceNumber === 2) {
                  this.totalDistributableQtyCells[1].focus();
                } else if ( item.sequenceNumber === this.totalDistributableQtyCells.length + 1) {
                  this.totalDistributableQtyCells[0].focus();
                } else if (item.sequenceNumber > 2 && item.sequenceNumber < this.totalDistributableQtyCells.length + 1) {
                  this.totalDistributableQtyCells[item.sequenceNumber - 1].focus();
                }                    
                break;       
                case '39':   //right             
                event.preventDefault ? event.preventDefault() : (event.returnValue = false);       
                if(item.sequenceNumber === 2) {
                  this.totalDistributableQtyCells[1].focus();
                } else if ( item.sequenceNumber === this.totalDistributableQtyCells.length + 1) {
                  this.totalDistributableQtyCells[0].focus();
                } else if (item.sequenceNumber > 2 && item.sequenceNumber < this.totalDistributableQtyCells.length + 1) {
                  this.totalDistributableQtyCells[item.sequenceNumber - 1].focus();
                }
                break;
                case '37': //left
                event.preventDefault ? event.preventDefault() : (event.returnValue = false);            
                if(item.sequenceNumber === 2) {
                this.totalDistributableQtyCells[this.totalDistributableQtyCells.length - 1 ].focus();
                } else if ( item.sequenceNumber === this.totalDistributableQtyCells.length + 1) {
                this.totalDistributableQtyCells[this.totalDistributableQtyCells.length - 2 ].focus();
                } else if (item.sequenceNumber > 2 && item.sequenceNumber < 11) {
                this.totalDistributableQtyCells[item.sequenceNumber - 3].focus();
                }
                break;
            }            
        }else if ( this.deviceInfo.browser === 'chrome') {  
            console.log('chrome: event.key ' + event.key);          
            switch(event.key) {
                case 'Enter':         
                event.preventDefault();
                if(item.sequenceNumber === 2) {
                    this.totalDistributableQtyCells[1].focus();
                } else if ( item.sequenceNumber === this.totalDistributableQtyCells.length + 1) {
                    this.totalDistributableQtyCells[0].focus();
                } else if (item.sequenceNumber > 2 && item.sequenceNumber < this.totalDistributableQtyCells.length + 1) {
                    this.totalDistributableQtyCells[item.sequenceNumber - 1].focus();
                }
                break;       
                case 'ArrowRight':                
                event.preventDefault();          
                if(item.sequenceNumber === 2) {
                    this.totalDistributableQtyCells[1].focus();
                } else if ( item.sequenceNumber === this.totalDistributableQtyCells.length + 1) {
                    this.totalDistributableQtyCells[0].focus();
                } else if (item.sequenceNumber > 2 && item.sequenceNumber < this.totalDistributableQtyCells.length + 1) {
                    this.totalDistributableQtyCells[item.sequenceNumber - 1].focus();
                }
                break;
                case 'ArrowLeft':
                event.preventDefault();                
                if(item.sequenceNumber === 2) {
                    this.totalDistributableQtyCells[this.totalDistributableQtyCells.length - 1 ].focus();
                } else if ( item.sequenceNumber === this.totalDistributableQtyCells.length + 1) {
                    this.totalDistributableQtyCells[this.totalDistributableQtyCells.length - 2 ].focus();
                } else if (item.sequenceNumber > 2 && item.sequenceNumber < 11) {
                    this.totalDistributableQtyCells[item.sequenceNumber - 3].focus();
                }
                break;
            }
        }
      }

来源：https://stackoverflow.com/questions/47949110/page-refresh-enter-arrow-keys-not-working-in-table-cells