Question

我有一个带有几个文本输入字段的表单。我希望当用户按下ENTER键时，您跳到下一个输入字段（保持输入的文字，与Tab键相同的行为），并且当您按ESC键时，清除输入字段。

ESC键与this question相同，但对于Angular2，而不是AngularJS。

它也类似于this one，但使用键盘而不是按钮。

我的想法如下：

<input type="text" formControlName="whatever" id="whatever" 
   class="form-control" autocomplete="off" (keyup)="onKey($event)" required>

，然后在.ts中：

  public onKey(event: { key: string; }) {
    if (event.key === 'Enter') {
      I DON'T KNOW WHAT TO DO (1);
    }
    if (event.key === 'Escape' || event.key === 'Esc') {
      I DON'T KNOW WHAT TO DO (2);
    }
  }

其中I DON'T KNOW WHAT TO DO (1)应该“专注于以下输入/按钮”和I DON'T KNOW WHAT TO DO (2)“应该清除单元格并集中注意力”。

event.key === 'Escape' || event.key === 'Esc'将同时考虑Chrome和IE。我仍然必须检查其他浏览器的其他选项，但是如果您有建议，也将不胜感激！ ;-）。

如果我要将我的问题分为两个不同的问题（一个用于ENTER，一个用于ESC），请告诉我，我会做。谢谢！

更新：我找到了this question，但是答案取决于nextElementSibling，在我的情况下，该答案不起作用（输入字段不是同级）。我还发现了this similar question，但其中的某些元素已被弃用。

Answer 1

您应该使用(keyup.enter)或keyup.escape来实现此功能并使您的操作分开：

<input type="text" formControlName="whatever" id="whatever" 
   class="form-control" autocomplete="off" (keyup.enter)="keyTab($event)" 
   (keyup.escape)="onKeyEscape($event)" required>

在您的组件中：

getControlName(name): any { return this.form.get(name); }
onKeyEscape(event) {
     // get the form control from your form and reset it 
   this.getControlName(event.target.getAttribute('formControlName')).reset();
   event.srcElement.blur();
  }

keyTab(event) {
    let element = event.srcElement.nextElementSibling; // get the sibling element

    if (element !== null){  // / focus if not null
       element.focus();
    } else {
         return;
    }
  }

使用ESC键清除Angular2中的输入文本字段

1 个答案: