更改手机中输入键的行为 - Angular 5-Java 学习之路

我正在使用 input 但是我不确定导航的配置是如何完成的（我猜它是预定义的行为） .

我不在最后 input ，回车键转到下一个 . 这个按我的意愿工作 .

然而，当我在最后 input 时，当我按下回车键时，它会自动点击下一个 button .

这就是我想要避免的 . 有没有办法改变这种行为？只是关闭键盘或点击另一个 button ？

我试过 keyup.enter 并且伪作品 . 它调用方法但也点击下一个 button

HTML

<input
          type="text"
          class="form-control"
          id="validationCustomSurname"
          placeholder="e.g. Lopez"
          required
          (keyup.enter)="onNavigate(1, 'forward')"
          [(ngModel)]="values.store.surname"
          name="surname"
        />

这个方法应该可以在手机上使用，所以我猜 keydown 不是一个选项，因为 $event.code 不会给我手机中的任何代码 .

1 回答

前段时间我做了一个指令see stackblitz，你在路上以div（或表格）的形式申请

<form [formGroup]="myForm" (submit)="submit(myForm)" enter-tab>
    Each input or button add a reference variable #nextTab like
    <input name="input1" formControlName="input1" #nextTab/>
    <button type="button" #nextTab/>
</form>

该指令使用ContentChildren将keydown.enter添加到所有具有#nextTab以聚焦到下一个控件的组件

export class EnterTabDirective {
  @ContentChildren("nextTab") controls: QueryList<any>
  nextTab

  constructor(private renderer: Renderer2, private el: ElementRef) {
  }
  ngAfterViewInit(): void {
    this.controls.changes.subscribe(controls => {
      this.createKeydownEnter(controls);
    })
    if (this.controls.length) {
      this.createKeydownEnter(this.controls);
    }
  }
  private createKeydownEnter(querycontrols) {
    querycontrols.forEach(c => {
      this.renderer.listen(c.nativeElement, 'keydown.enter', (event) => {
        if (this.controls.last != c) {
          let controls = querycontrols.toArray();
          let index = controls.findIndex(d => d == c);
          if (index >= 0) {
            let nextControl = controls.find((n, i) => n && !n.nativeElement.attributes.disabled && i > index)
            if (nextControl) {
              nextControl.nativeElement.focus();
              event.preventDefault();
            }
          }
        }
      })
    })
  }

回复于 2024-05-06T22:33:42+08:00

更改手机中输入键的行为 - Angular 5

1 回答

相关问题