JavaScript

回應表單事件

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

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

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

您只能在目前選取相關聯的 <input type="radio"> 時,使用 JavaScript 顯示 <input>

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

讓我們看看這項示範的 JavaScript 程式碼。您是否注意到 aria-controlsaria-expanded 屬性?使用這些 ARIA 屬性可協助螢幕閱讀器使用者瞭解何時會顯示或隱藏其他表單控制項。

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

假設您有一個留言表單。讀者在新增留言並提交表單後,如果能立即看到留言,而不需要重新整理網頁,那就再好不過了。

如要達成這項目標,請監聽 onsubmit 事件,然後使用 event.preventDefault() 防止預設行為,並使用 Fetch API 傳送 FormData

Browser Support

  • Chrome: 42.
  • Edge: 14.
  • Firefox: 39.
  • Safari: 10.1.

Source

您的後端指令碼可以檢查 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 APIsetCustomValidity() 方法定義您自己的錯誤訊息。

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

表單驗證的內建 HTML 功能非常實用,可在資料傳送至後端之前,通知使用者無效的表單欄位。如果使用者一離開表單欄位就收到通知,那該有多好!

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

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

系統會根據預設遮蓋 <input type="password"> 輸入的文字,以保護使用者隱私。顯示 <button> 切換輸入文字的顯示設定,協助使用者輸入密碼。

試用示範模式。使用「顯示密碼」圖示 <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>

進一步瞭解如何導入顯示密碼選項

資源