回應表單事件
您可以使用 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
。
您的後端指令碼可以檢查 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>
進一步瞭解如何實作顯示密碼選項。