使用右侧keyCode导航时如何跳转到下一行？

Question

我有一个包含三列的 table。第一列是文本，第二列和第三列是输入字段。在该行中，我可以使用 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();
    }
  }

Answer 1

您只需要根据输入的计数在 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

上的工作示例

Answer 2

在你的移动函数中，如果用户点击了右键，你必须检查 col 是否在 table 的最后一列，如果是，则将行增加一，并且将 col 重置为零，否则仅增加 col。

**当用户点击左侧时，当它到达 table 的第一列时，您可以执行相反的操作

你的 switch case 应该是这样的

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

使用右侧keyCode导航时如何跳转到下一行？

How can I jump to the next row when I navigate with keyCode on the right?

javascript

keycode

typescript

angular