更改手机中Enter键的行为-Angular 5 [英] Change behaviour of enter key in a phone - Angular 5

问题描述

我正在使用input s，但是我真的不确定导航的配置是如何完成的(我想这是预定义的行为).

I am working with inputs but I am not really sure about how is the configuration of the navigation done (I guess that it are predefined behaviours).

我不在最后一个input中，enter键转到下一个.这是我想要的.

I am not in the last input the enter key goes to the next one. This one is working as I want.

尽管如此，当我在最后一个input上时，按Enter键时，它将自动单击下一个button.

Nevertheless, when I am on the last input, when I press enter, it automatically clicks on the next button.

这就是我要避免的事情.有什么办法可以改变这种行为?只是要关闭键盘或单击另一个button?

This is what I am trying to avoid. Is there any way to change this behaviour? Just to close the keyboard or to click on another button?

我已经尝试过使用keyup.enter并且它是伪作品.它调用该方法，但也单击下一个button

I have tried with keyup.enter and it pseudo works. It calls to the method but also clicks on the next 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在手机上没有给我任何代码.

This method should work on a phone, so I guess that keydown is not an option since $event.code does not give me any code in the phone.

推荐答案

前段时间，我发出了一条指令

Some time ago I make a directive see stackblitz that you apply in a div (or in a form) in the way

<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向具有#nextTab的所有组件添加keydown.enter以集中到下一个控件

The directive use ContentChildren to add a keydown.enter to all the components that have #nextTab to focus to the next control

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();
            }
          }
        }
      })
    })
  }

这篇关于更改手机中Enter键的行为-Angular 5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！