可访问性：导航箭头键时，如何在输入中设置光标的位置？

Question

我已经在表中开发了箭头导航。箭头键向上，向下，左右，可以导航。在导航期间，如何始终将光标始终设置在输入中的右侧？

我的stackblitz： https:/stackblitz.com /Edit/stackoverflow-72056135-ube6hj?file=pledpile=plable-basic-example.ts

我的代码：

// html // html

 <input class="edit-input || focus-cell" type="text"[formControl]="rowControl.get(column.attribute)" appArrowKeyNav>

// ts

/**
   * Use arrowKeys
   * @param object any
   */
  move(object) {
    const inputToArray = this.inputs.toArray();
    let index = inputToArray.findIndex((x) => x.element === object.element);
    switch (object.action) {
      case 'UP':
        index -= this.columns.length;
        break;
      case 'DOWN':
        index += this.columns.length;
        break;
      case 'LEFT':
        index--;
        break;
      case 'RIGTH':
        index++;
        break;
    }

    if (index >= 0 && index < this.inputs.length) {
      inputToArray[index].element.nativeElement.focus();
    }
  }

Answer 1

我现在已经解决了考虑setSelectionRange（）的问题。我已经优化了我的代码：

/**
   * Use arrowKeys
   * @param object any
   */
  move(object) {
    const inputToArray = this.inputs.toArray();
    let index = inputToArray.findIndex((x) => x.element === object.element);
    switch (object.action) {
      case 'UP':
        index -= this.columns.length;
        break;
      case 'DOWN':
        index += this.columns.length;
        break;
      case 'LEFT':
        index--;
        break;
      case 'RIGTH':
        index++;
        break;
    }

    if (index >= 0 && index < this.inputs.length) {
      // Set focus
      inputToArray[index].element.nativeElement.focus();
      // Set cursor at the end of the text in the input
      setTimeout(() => {
        if (inputToArray[index].element.nativeElement.value?.length > 0) {
          const pos = inputToArray[index].element.nativeElement.value.length;
          inputToArray[index].element.nativeElement.setSelectionRange(pos, pos);
        }
      }, 1);
    }
  }