JavaScript

回應表單事件

您可以使用 JavaScript 回應表單上的使用者互動、顯示其他表單欄位、提交表單等。

協助使用者填寫其他表單控制項

假設您建立了問卷調查表單，使用者選取一個選項後，您想顯示額外的 <input>，詢問與所選項目相關的特定問題。如何只顯示相關的 <input> 元素？

只有在目前選取關聯的 <input type="radio"> 時，才能使用 JavaScript 顯示 <input>。

if (event.target.checked) {
    // show additional field
} else {
   // hide additional field
}

讓我們看看示範的 JavaScript 程式碼。您是否注意到 aria-controls 和 aria-expanded 屬性？有了這些 ARIA 屬性，螢幕閱讀器使用者就能瞭解何時顯示或隱藏其他表單控制項。

確保使用者不必離開頁面就能提交表單

假設您有一個留言表單，當讀者新增註解並提交表單時，如果讀者不用重新整理頁面就能立即查看註解，這會是最理想的做法。

為此，請監聽 onsubmit 事件，然後使用 event.preventDefault() 防止預設行為，並使用 Fetch API 傳送 FormData。

瀏覽器支援

  • 42
  • 14
  • 39
  • 10.1

資料來源

您的後端指令碼可以檢查 POST 要求是否來自瀏覽器 (使用表單元素的 action 屬性，其中 method="post") 或 JavaScript 要求，例如 fetch() 要求。

if (req.xhr || req.headers.accept.indexOf('json') !== -1) {
    // return JSON
} else {
    // return HTML
}

務必通知螢幕閱讀器使用者動態內容變更。 在 HTML 中加入含有 aria-live="polite" 屬性的元素，並在變更後更新元素內容。舉例來說，在使用者提交留言後，將文字更新為「您的留言已成功發布」。

進一步瞭解 ARIA 即時區域。

使用 JavaScript 進行驗證

確保錯誤訊息與網站風格和調性一致

不同瀏覽器的預設錯誤訊息用語不同。 如何確保向所有使用者顯示相同的訊息，且訊息與網站的風格和語氣一致？使用 Constraint Validation API 的 setCustomValidity() 方法定義自己的錯誤訊息。

確保使用者即時收到錯誤通知

在資料傳送至後端之前，針對表單驗證的內建 HTML 功能，很適合用來在資料傳送至後端之前，通知使用者有關無效的表單欄位。當使用者離開表單欄位時，最好立即通知對方嗎？

監聽在元素失去焦點時觸發的 blur 事件，並使用 ValidityState 介面偵測表單控制項是否無效。

確保使用者可看到自己輸入的密碼

為尊重使用者隱私，輸入的 <input type="password"> 文字預設會遭到遮蓋。顯示 <button> 切換已輸入文字的顯示設定，協助使用者輸入密碼。

立即試用如要切換輸入文字的顯示設定，請使用「Show Password」<button>。它是怎樣運作的？按一下「Show Password」，將密碼欄位的 type 屬性從 type="password" 變更為 type="text"，而 <button> 文字已變更為「Hide Password」。

請務必讓「顯示密碼」按鈕可供存取。 使用 aria-controls 屬性連結 <button> 與 <input type="password">。

如要在密碼已顯示或隱藏時通知螢幕閱讀器使用者，請搭配 aria-live="polite" 使用隱藏元素，並據此變更文字。請務必讓螢幕閱讀器使用者知道，系統在什麼情況下會顯示密碼，並讓其他看著螢幕的人看到密碼。

<span class="visually-hidden" aria-live="polite">
    <!-- Dynamically change this text with JavaScript -->
</span>

進一步瞭解如何實作顯示密碼選項。

資源