时间戳

首页 > 解决方案 > 达到限制时如何聚焦下一个输入但如果输入嵌套在角度的Html li标签中？

angular - 达到限制时如何聚焦下一个输入但如果输入嵌套在角度的Html li标签中？

问题描述

我的 6 个输入并排排成一排，就像这样

component.html <li *ngFor="let i of [1,2,3,4,5,6]"> <input class="form-control" placeholder="0" type="text" maxlength="1 " (keyup)="onDigitInput($event)">

现在，当长度限制自动达到时，我在我controller的focus下一个input元素中尝试了这个。maximum

onDigitInput(event: any) {
  let element;
  if (event.code !== 'Backspace')

  element = event.srcElement.nextElementSibling;
  console.log('Element : ',event.srcElement)

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

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

input但是我的解决方案的问题是，只有当所有元素必须彼此并排而不在其他元素中包装/嵌套时，它才会起作用。但在我的情况下，我的每个input元素都包含在<li>标签中，所以这就是它不起作用的原因。因此，任何人都可以通过任何功能甚至directive可能的方式为这个问题提出任何解决方案。

标签： angulartypescript

解决方案

我调整了您发布的解决方案以适应您拥有的结构（inputs inside lis）。

  onDigitInput(event: any) {
    const element = this.getNextInput(
      event.srcElement,
      event.code === "Backspace"
    );

    if (!element) {
      return;
    }

    element.focus();
  }

  getNextInput(currentInput: Element, isBackspace: boolean): HTMLElement {
    if (!currentInput) {
      return null;
    }
    const parentListItem = currentInput.parentElement;
    let nextListItem = isBackspace
      ? parentListItem.previousElementSibling
      : parentListItem.nextElementSibling;
    return nextListItem?.firstChild as HTMLElement;
  }

推荐阅读