Angular 表单更改 Tab 键顺序

Question

为了简单起见，在构建两列表单时，我使用弹性框将其构建在两个分开的 div 中。然而，该表格是从左到右读取的，即名字在 div 的顶部，姓氏在 div 的顶部。如果用户使用 tab 键在输入之间移动，则 tab 键会向下移动而不是跨过表单。这是我的疏忽，但我想知道是否可以将输入之间的制表符设置为与默认值不同。也许图片会有所帮助。

所以我想将其更改为tab across。我该怎么做？此外，实际表格比下面显示的更复杂，所以我不想重建 html.

我的HTML

<div fxLayout="row" fxLayout.lt-sm="column" fxLayoutAlign="space-between center">
 <div fxFlex="40">
   <mat-form-field class="formFieldLeft">
    <div class="is-size-7 has-text-grey-light mbxs">First Name</div>
    <input matInput formControlName="firstName">
   </mat-form-field>
<mat-form-field class="formFieldLeft">
  <div class="is-size-7 has-text-grey-light mbxs">Email Address</div>
  <input matInput formControlName="email">
</mat-form-field>
<mat-form-field class="formFieldLeft mblg">
  <div class="is-size-7 has-text-grey-light mbxs">Company Phone Number</div>
  <input matInput formControlName="companyPhoneNumber">
</mat-form-field>

<div fxFlex="60">
  <mat-form-field class="formFieldRight">
    <div class="is-size-7 has-text-grey-light mbxs">Surname</div>
    <input matInput formControlName="lastName">
  </mat-form-field>
  <mat-form-field class="formFieldRight">
    <div class="is-size-7 has-text-grey-light mbxs">Job Title</div>
    <input matInput formControlName="jobTitle">
  </mat-form-field>
  <mat-form-field class="formFieldRight mblg">
    <div class="is-size-7 has-text-grey-light mbxs">Mobile Number</div>
    <input matInput formControlName="mobilePhoneNumber">
  </mat-form-field>
</div>

Answer 1

您可以保存活动选项卡索引并在

上创建单独的函数

(keyup)="onKeypressEvent($event)" {
 // check does it `tab`
}

检查键码并根据当前选项卡的活动位置更改下一个活动选项卡

Answer 2

加tabIndex赞

<input tabindex="3">
<input tabindex="0">
<input tabindex="-1">
<input>         
<input tabindex="2">
<input tabindex="1">

有关详细信息，请参阅 this

Angular 表单更改 Tab 键顺序

Angular Forms change Tab order

html

angular

angular-forms