angular - Enter键以Ionic 4 Angular 8形式移动到下一个元素

Question

在我用 Ionic 和 Angular 8 构建的 PWA 中，我需要处理回车键以移动到下一个元素。我怎样才能用(keyup.enter)实现它。请帮我。

https://stackblitz.com/edit/ionic-3drfby

Answer 1

我会为此编写一个自定义指令。受此启发 answer .该指令可以放在 formtag 上，我们使用 HostListener听听keyup.enter如果存在下一个元素，我们将焦点移到它上。

我们需要对您的表单提交方式进行一些更改，因为 ngSubmit每次按回车键都会被调用。所以我会从表单标签中删除它，将按钮设置为 type="button"而是将单击事件附加到它以调用 logForm() .

所以总而言之，这就是我所做的:

<form focusDir>
<!-- .... -->
<button ion-button type="button" block (click)="logForm()">Add Todo</button>

该指令:

@Directive({
  selector: "[focusDir]"
})
export class FocusDirective {
  constructor() {}

  @HostListener("keyup.enter") onKeyupEnter() {
    var nextEl = this.findNextTabStop(document.activeElement);
    nextEl.focus();
    // or try for ionic 4:
    // nextEl.setFocus();
  }

  findNextTabStop(el) {
    var universe = document.querySelectorAll(
      "input, button, select, textarea, a[href]"
    );
    var list = Array.prototype.filter.call(universe, function(item) {
      return item.tabIndex >= "0";
    });
    var index = list.indexOf(el);
    return list[index + 1] || list[0];
  }
}

然后在 declarations 中标记此指令ngModule 中的数组。

STACKBLIZ