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。

瀏覽器支援

注意： FormData 是一組鍵/值組合，代表表單欄位及其值。您可以將所有表單欄位新增至 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" 屬性的元素。並在變更後更新元素內容舉例來說，在使用者提交評論後，將文字更新為「Your comment has successfully post」(已成功發布您的評論)。

進一步瞭解 ARIA 即時區域。

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

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

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

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

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

試試看： 嘗試改善顯示密碼 <button>。您要將 <button> 放在何處？是否只能使用圖示，並確保 <button> 可供存取？

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

注意： 並非所有螢幕閱讀器都支援 aria-controls 屬性，但對於支援該屬性的螢幕閱讀器來說，這是一項絕佳的強化功能。

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

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

敬上

注意： Microsoft Edge 會顯示 <input type="password"> 的內建密碼顯示控制項。為避免有兩個顯示按鈕，請使用以下選項隱藏內建的控制項：css ::-ms-reveal { display: none } 。進一步瞭解如何自訂密碼顯示按鈕。