当我使用右侧的 keyCode 导航时，如何跳到下一行？

编程问答 2022-07-07

问题描述

我有一个包含三列的表格。第一列是文本，第二和第三列是输入字段。在行内，我可以使用 keyCode 向右导航，但是当我到达最后一列时，我无法跳到下一行。我必须在代码中添加什么才能实现这一点？

我的 StackBlitz：https://stackblitz.com/edit/angular-wmfjhh-vhkikf?file=app%2Ftable-basic-example.ts

代码：

// Snippet from HTML
<tbody formArrayName="rows" *ngIf="rows && rows !== null && !isLoading">
      <tr class="optimize-row" *ngFor="let rowControl of rows.controls; let rowIndex = index">
        <td [formGroupName]="rowIndex" *ngFor="let column of displayedColumns; let columnIndex = index;">
          <div *ngIf="attributesWithFormControls.includes(column.attribute); else otherColumns">
            <span>
              <label>
                <input style="background-color: silver" [id]="'row-' + rowIndex + '-col-' + columnIndex" type="text" arrow-div [formControl]="rowControl.get(column.attribute)" (focus)="onFocus($event)">
              </label>
            </span>
          </div>
          <ng-template #otherColumns>
            <div tabindex="0" [id]="'row-' + rowIndex + '-col-' + columnIndex" arrow-div>
              Here is a Number
            </div>
          </ng-template>
        </td>
      </tr>
    </tbody>

// TS
/**
   * Use arrowKey
   * @param object any
   */
  move(object) {
    console.log('move',object);

    const id = object.element.nativeElement.id;

    console.log(id);

    const arr = id.split('-');
    let row: number = Number(arr[1]);
    let col: number = Number(arr[3]);
    switch (object.action) {
      case 'UP':
        --row;
        break;
      case 'DOWN':
        ++row;
        break;
      case 'LEFT':
        --col;
        break;
      case 'RIGTH':
        ++col;
        break;
    }
    this.setFocus(row,col);
  }

 onFocus(event: FocusEvent): void {
    console.log('onFocus',event.target);

    const target = event.target as HTMLElement;

    if (target.tagName === 'INPUT') {
      this.currentInputInFocus = target;
    }
  }

  private setFocus(row: number,col: number) {
    console.log(`setFocus [row:${row}] [col:${col}]`);
    const newElementToFocusOn = document.getElementById(
      `row-${row}-col-${col}`
    );
    if (newElementToFocusOn) {
      console.log('focusing');
      this.currentInputInFocus = newElementToFocusOn;
      this.currentInputInFocus.focus();
    }
  }

解决方法

您只需要根据您输入的数量在 switch case 上添加更多条件：

例如，如果您的 col 大于 2（请注意，您可以根据每行输入的数量使用动态数字），这意味着您需要转到下一行，因此您也需要增加行值：> 

if(col > 2)
         {
           row++;
           col = 0;
         }

也与上一行相同：

  switch (object.action) {
  case 'UP':
    --row;
    break;
  case 'DOWN':
    ++row;
    break;
  case 'LEFT':
    --col;
    if(col < 0)
    {
      row--;
      col = 2;
    }
    break;
  case 'RIGTH':
    ++col;
    if(col > 2)
     {
       row++;
       col = 0;
     }
    break;
}

这是 stackblitz 上的工作示例

,

在您的移动功能中，如果用户点击了右键，您必须检查 col 是否在表格的最后一列，如果是，则将行增加一，并将 col 重置为零，否则增加仅上列。

**当用户在左侧被点击时，当它到达表格的第一列时，你可以做相反的事情

你的开关盒应该是这样的

switch (object.action) {
  case 'UP':
    --row;
    break;
  case 'DOWN':
    ++row;
    break;
  case 'LEFT':
    if (col === 0) {
      --row;
      col = 2;
    } else {
      --col;
    }
    break;
  case 'RIGTH':
    if (col === 2) {
      ++row;
      col = 0;
    } else {
      ++col;
    }
    break;
}

参见示例： stackblitz

angularangularjavascripttypescripttypescripttypescript