Javascript 如何修复：选项卡索引跳过已禁用的输入

对于我们的故事，我们必须确保我们的联系我们页面是可访问的。我们应该确保每个输入的标签顺序都是焦点，以便在屏幕阅读器上读取信息。但是，我们不希望用户能够编辑某些输入字段，但是我们仍然希望他们能够让屏幕阅读器捕获这些字段。这一问题的最佳做法是什么？解决这个问题最好的方法是什么

我在网上找到了这个例子，并尝试探索这个补丁的实现。这是一种css风格的方法来缓解问题，但不涉及disabled属性

<form  [formGroup]="contactUsForm">
  <div class="container pt-4">

    <!-- Instructions -->
    <div name="instructions-row" class="row">
      <div tabindex="0" name="form-instructions"  id="form-instructions" class="col justify-content-center">
        Please fill out the form and click the send button to submit your message. If your question or comment is
        about a specific account, enter the account name and account number in the body of the message.
      </div>
    </div>

    <!-- Basic Info -->
    <div name="basic-info-row"  class="row">
      <div class="col-xl-6 justify-content-center">
        <!-- From -->
        <div class="input-container">
          <label for="from-input" class="liberty-text-secondary">
            From
            <span *ngIf="contactUsForm.get('from').hasError('required')" class="text-danger">
              *
            </span>
          </label>
          <input role="textbox" id="from-input" class="liberty-input col-12" formControlName="from" />
        </div>

        <!-- Account Number -->
        <div class="input-container">
          <label for="account-number-input" class="liberty-text-secondary">
            Account Number
            <span *ngIf="contactUsForm.get('accountNumber').hasError('required')" class="text-danger">
              *
            </span>
          </label>
          <input tabindex="0" role="textbox" id="account-number-input" class="liberty-input col-lg-4 col-md-12" formControlName="accountNumber" />
        </div>

        <!-- User ID -->
        <div class="input-container">
          <label for="user-id-input" class="liberty-text-secondary">
            User ID
            <span *ngIf="contactUsForm.get('userId').hasError('required')" class="text-danger">
              *
            </span>
          </label>
          <input tabindex="0" role="textbox" id="user-id-input" class="liberty-input col-lg-10 col-md-12" formControlName="userId" />
        </div>

        <!-- Name -->
        <div class="input-container">
          <label for="name-input" class="liberty-text-secondary">
            Name
            <span *ngIf="contactUsForm.get('name').hasError('required')" class="text-danger">
              *
            </span>
          </label>
          <input tabindex="0" role="textbox" id="name-input" class="liberty-input col-lg-10 col-md-12" formControlName="name" />
        </div>

        <!-- Phone Number -->
        <div class="input-container">
          <label for="phone-number-input" class="liberty-text-secondary">
            Phone Number
            <span *ngIf="contactUsForm.get('phoneNumber').hasError('required')" class="text-danger">
              *
            </span>
          </label>
          <input tabindex="0" role="textbox" id="phone-number-input" class="liberty-input col-lg-4 col-md-12" formControlName="phoneNumber" />

          <span *ngIf="contactUsForm.get('phoneNumber').hasError('pattern')" class="text-danger">
            Please enter a valid phone number.
          </span>
        </div>

        <!-- Subject -->
        <div class="input-container">
          <label for="subject-input" class="liberty-text-secondary">
            Subject
            <span *ngIf="contactUsForm.get('subject').hasError('required')" class="text-danger">
              *
            </span>
          </label>
          <select tabindex="0" id="subject-input" class="liberty-select col-lg-11 col-md-12" formControlName="subject">
            <option *ngIf="!contactUsForm.value.subject" [value]="null" selected disabled></option>
            <option *ngFor="let subject of subjects" [value]="subject">{{subject}}</option>
          </select>
        </div>

      </div>
    </div>

    <!-- Comments -->
    <div class="row">
      <div class="col-xl-10 justify-content-center">
        <div class="input-container">
          <label for="comments-input" class="liberty-text-secondary">
            Comments
            <span *ngIf="contactUsForm.get('comments').hasError('required')" class="text-danger">
              *
            </span>
          </label>
          <textarea tabindex="0" role="textbox" id="comments-input" class="liberty-text-area" formControlName="comments"></textarea>
        </div>
      </div>
    </div>

    <!-- Submit Button -->
    <div class="row py-4">
      <div class="col container">
        <div class="row">
          <button tabindex="0" role="button" id="submit-button" class="col-xl-2 col-3 btn liberty-button mx-3" [disabled]="contactUsForm.invalid"
            (click)="onSubmitClick()">
            Send
          </button>
          <button tabindex="0" role="button" id="cancel-button" class="col-xl-2 col-3 btn liberty-button mx-3" routerLink="/home">
            Cancel
          </button>
          <span class="col-xl-8 col-6"></span>
        </div>
      </div>
    </div>
  </div>
</form>

请填写表格并单击“发送”按钮以提交您的邮件。如果你的问题或评论是
关于特定帐户，请在邮件正文中输入帐户名和帐户号。
从…起
*
帐号
*
用户ID
*
名称
*
电话号码
*
请输入有效的电话号码。
主题
*
{{subject}}
评论
*
发送
取消

---

以上代码选项卡仅通过已启用的输入。

使用readonly属性或css指针事件none可禁用输入。使用ngClass动态添加类

component.css

.disabled {
  pointer-events: none; 
  opacity: 0.5;
}

component.html

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <input type="text" formControlName="userName">
  <input  type="text" formControlName="password">
  <input [ngClass]="{'disabled':!form.valid}"  readonly type="button" value="submit"  >
</form>

---

注意：如果将指针事件无与输入类型按钮一起使用，请确保添加只读属性，否则它将可以通过enter按钮提交。

使用只读属性或css指针事件无将输入禁用。使用ngClass动态添加类

component.css

.disabled {
  pointer-events: none; 
  opacity: 0.5;
}

component.html

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <input type="text" formControlName="userName">
  <input  type="text" formControlName="password">
  <input [ngClass]="{'disabled':!form.valid}"  readonly type="button" value="submit"  >
</form>

---

注意：如果将指针事件none与输入类型按钮一起使用，请确保添加只读属性，否则它将可以通过enter按钮提交

我刚刚发现我还可以使用

只读属性。这将使其不可编辑，但样式被忽略。仍在努力研究最佳实践解决方案我刚刚发现我还可以使用
readonly
属性。这将使其不可编辑，但样式被忽略。仍在努力研究最佳实践解决方案