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

瀏覽器支援

  • Chrome:42.
  • Edge:14。
  • Firefox:39。
  • Safari: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" 屬性的元素。 並在變更後更新元素內容 舉例來說,在使用者提交評論後,將文字更新為「Your comment has successfully post」(已成功發布您的評論)。

進一步瞭解 ARIA 即時區域

使用 JavaScript 進行驗證

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

不同瀏覽器的預設錯誤訊息中的用詞有所不同。 如何讓所有使用者都能看到相同的訊息 訊息是否切合您網站的風格和語氣? 使用 setCustomValidity() Constraint Validation API 的方法 定義自己的錯誤訊息

確保使用者即時得知發生錯誤的資訊

表單驗證內建的 HTML 功能很適合用來通知使用者 。 如果在使用者離開表單欄位時,盡快通知他們,這不是很棒嗎?

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

確保使用者可以看見他們輸入的密碼

根據預設,輸入的 <input type="password"> 文字會經過遮蔽。 尊重使用者隱私 顯示 <button> 可切換所輸入文字的顯示設定,協助使用者輸入密碼。

立即試用。切換 透過「顯示密碼」圖示 <button> 查看所輸入文字內容的顯示設定。 它是怎樣運作的?按一下「顯示密碼」。 將密碼欄位的 type 屬性從 type="password" 變更為 type="text", 而 <button> 文字會變更為「隱藏密碼」。

請務必開啟「顯示密碼」按鈕。 使用 aria-controls 屬性將 <button> 連結至 <input type="password">

如要在密碼已顯示或隱藏時通知螢幕閱讀器使用者,請按照下列步驟操作: 搭配 aria-live="polite" 使用隱藏元素,並據此變更文字。 請務必讓螢幕閱讀器使用者知道密碼顯示時間,並向其他人查看螢幕畫面。

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

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

資源