Angular |自动将下一个输入集中在最大长度上

Question

我正在尝试提出一种更好的方法，以便能够将下一个输入集中在 Angular 上，而无需手动输入我想要集中的输入。

这是我目前拥有的 html...

<div class="mb-2 digit-insert d-flex align-items-center">
  <div class="confirmation-group d-flex">
    <div class="digit-wrapper">
      <input #digitOne type="text" (paste)="onDigitPaste($event)" maxlength="1"
        (keyup)="onDigitInput($event, null, digitTwo)" />
    </div>
    <div class="digit-wrapper">
      <input #digitTwo type="text" maxlength="1" (keyup)="onDigitInput($event, digitOne, digitThree)" />
    </div>
    <div class="digit-wrapper">
      <input #digitThree type="text" maxlength="1" (keyup)="onDigitInput($event, digitTwo, digitFour)" />
    </div>
  </div>
  <span class="confirmation-divider m-3">-</span>
  <div class="confirmation-group d-flex">
    <div class="digit-wrapper">
      <input #digitFour type="text" maxlength="1" (keyup)="onDigitInput($event, digitThree, digitFive)" />
    </div>
    <div class="digit-wrapper">
      <input #digitFive type="text" maxlength="1" (keyup)="onDigitInput($event, digitFour, digitSix)" />
    </div>
    <div class="digit-wrapper">
      <input #digitSix type="text" maxlength="1" (keyup)="onDigitInput($event, digitFive, null)" />
    </div>
  </div>
</div>

如您所见，我有一个 key up 事件，我传递了我想要关注的输入是否输入。

这是 typescript 标记...

onDigitInput(event: any, previousElement: any, nextElement: any): void {
    if (event.code !== 'Backspace' && nextElement !== null) {
        nextElement.focus();
    }

    if (event.code === 'Backspace' && previousElement !== null) {
        previousElement.focus();
        previousElement.value = '';
    }
}

我想知道是否有任何方法可以使用指令或只是比现在更好一点的方法来做到这一点？

Answer 1

更改您的 input元素:

<input #digitSix type="text" maxlength="1" (keyup)="onDigitInput($event)" />

然后将您的函数实现更改为:

onDigitInput(event){

   let element;
   if (event.code !== 'Backspace')
        element = event.srcElement.nextElementSibling;

    if (event.code === 'Backspace')
        element = event.srcElement.previousElementSibling;

    if(element == null)
        return;
    else
        element.focus();
}

结果是更干净的代码。

使用此代码:

<div class="mb-2 digit-insert d-flex align-items-center">
  <div class="confirmation-group d-flex">
      <input #digitOne type="text" (paste)="onDigitPaste($event)" maxlength="1"
        (keyup)="onDigitInput($event)" />
      <input #digitTwo type="text" maxlength="1" (keyup)="onDigitInput($event)" />
      <input #digitThree type="text" maxlength="1" (keyup)="onDigitInput($event)" />
  </div>
  <span class="confirmation-divider m-3">-</span>
  <div class="confirmation-group d-flex">
      <input #digitFour type="text" maxlength="1" (keyup)="onDigitInput($event)" />
      <input #digitFive type="text" maxlength="1" (keyup)="onDigitInput($event)" />
      <input #digitSix type="text" maxlength="1" (keyup)="onDigitInput($event)" />
  </div>
</div>