Блог

Для простоты при создании формы с двумя столбцами я собрал ее в два отдельных раздела, используя flex box. Однако форма читается слева направо, т.Е. Имя в верхней части первого раздела и фамилия в верхней части второго раздела. Если пользователь использует клавишу 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>
  

Добавить tabIndex лайк

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

смотрите Это для получения более подробной информации

Вы можете сохранить активный индекс вкладки и создать отдельную функцию на

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

проверьте код ключа и в зависимости от того, где вы активируете текущую вкладку, измените следующую активную вкладку