使用者輸入方法和控制元件

Web 表單需要使用者輸入。在設計 Web 表單或任何 Web 內容時，務必考慮使用者如何與他們的裝置和瀏覽器互動。Web 使用者輸入超出了簡單的滑鼠和鍵盤：例如，考慮觸控式螢幕。

在本文中，我們探討了使用者與表單和其他 Web 內容互動的不同方式，並提供了管理使用者輸入、實際示例以及指向更多資訊的連結。

隨著您開發更復雜和互動式的表單或其他 UI 功能，您可能需要研究許多 HTML 元素和 JavaScript API。例如，您可能希望建立需要非語義元素可編輯內容的自定義表單控制元件。您可能希望支援觸控事件，確定或控制螢幕方向，使表單佔據整個螢幕，或啟用拖放功能。本指南介紹了所有這些功能，並引導您瞭解每個主題的更多資訊。

為了為儘可能多的使用者提供良好的體驗，您需要支援多種輸入方法，包括滑鼠、鍵盤、手指觸控等。可用的輸入機制取決於執行應用程式的裝置的功能。

您應始終注意鍵盤的可訪問性——許多 Web 使用者僅使用鍵盤瀏覽網站和應用程式，阻止他們使用您的功能是一個糟糕的主意。

涵蓋主題

為了支援觸控式螢幕顯示，觸控事件解釋了移動裝置、冰箱面板、博物館資訊亭顯示器等基於觸控的使用者介面上的手指活動。
全屏 API 允許您以全屏模式顯示內容，如果您在冰箱或博物館資訊亭上提供表單，則需要此功能。
當您需要建立自定義表單控制元件（如富文字編輯器）時，contentEditable 屬性可以從通常不可編輯的 HTML 元素建立可編輯控制元件。
拖放 API 允許使用者在頁面上拖動元素並將其放在不同的位置。在選擇要上傳的檔案或重新排序頁面內的內容模組時，這有助於改善使用者體驗。
當螢幕方向對您的佈局很重要時，您可以使用CSS 媒體查詢根據瀏覽器方向設定表單的樣式，甚至可以使用螢幕方向 API讀取螢幕方向狀態並執行其他操作。

以下部分提供了一組建議和最佳實踐，以使盡可能多的使用者能夠使用您的網站和應用程式。

支援常見的輸入機制

鍵盤

大多數使用者將使用鍵盤在表單控制元件中輸入資料。有些人還會使用鍵盤導航到這些表單控制元件。為了實現可訪問性和更好的使用者體驗，正確標記所有表單控制元件非常重要。當每個表單控制元件都正確關聯了<label>時，您的表單將對所有人完全可訪問，最值得注意的是任何使用鍵盤、螢幕閱讀器以及可能根本沒有螢幕的人。

如果您想新增其他鍵盤支援，例如在按下特定鍵時驗證表單控制元件，您可以使用事件偵聽器捕獲並響應鍵盤事件。例如，如果您想在按下任何鍵時新增控制元件，則需要在視窗物件上新增一個事件偵聽器

window.addEventListener("keydown", handleKeyDown, true);
window.addEventListener("keyup", handleKeyUp, true);

handleKeyDown 和 handleKeyUp 是定義在觸發 keydown 和 keyup 事件時要執行的控制邏輯的函式。

注意：請檢視事件參考和KeyboardEvent指南，以瞭解有關鍵盤事件的更多資訊。

滑鼠

您還可以捕獲滑鼠和其他指標事件。MouseEvent DOM 介面表示使用者與滑鼠等指向裝置互動時發生的事件。常見的滑鼠事件包括click、dblclick、mouseup和mousedown。使用滑鼠事件介面的所有事件列表在事件參考中提供。

當輸入裝置是滑鼠時，您還可以透過指標鎖定 API 控制使用者輸入並實現拖放（請參見下文）。您還可以使用 CSS 測試指標裝置支援。

手指觸控

為了為觸控式螢幕裝置提供額外的支援，最好考慮螢幕解析度和使用者輸入方面的不同功能。觸控事件可以幫助您在觸控式螢幕裝置上實現互動式元素和常見的互動手勢。

如果您想使用觸控事件，則需要新增事件偵聽器並指定處理程式函式，這些函式將在事件觸發時被呼叫

element.addEventListener("touchstart", handleStart, false);
element.addEventListener("touchcancel", handleCancel, false);
element.addEventListener("touchend", handleEnd, false);
element.addEventListener("touchmove", handleMove, false);

其中 element 是您要在其上註冊觸控事件的 DOM 元素。

注意：有關使用觸控事件可以執行的操作的更多資訊，請閱讀我們的觸控事件指南。

指標事件

滑鼠不是唯一的指向裝置。使用者的裝置可能包含多種輸入形式，例如滑鼠、手指觸控和筆輸入。每個指標的大小都不同。指標事件 API 如果您需要透過標準化每個指標的處理來跨裝置管理事件，則可能會派上用場。指標可以是滑鼠游標、筆、觸控（包括多點觸控）或其他指向輸入裝置在螢幕上產生的任何接觸點。

處理通用指標輸入的事件與滑鼠事件非常相似：pointerdown、pointermove、pointerup、pointerover、pointerout 等。PointerEvent 介面提供了您可能希望捕獲的有關指標裝置的所有詳細資訊，包括其大小、壓力和角度。

實現控制元件

螢幕方向

如果您需要根據使用者是處於縱向模式還是橫向模式而使用略微不同的佈局，則可以使用CSS 媒體查詢根據螢幕的大小或方向定義不同佈局或表單控制元件寬度的 CSS，設定 Web 表單的樣式時。

當螢幕方向對您的表單很重要時，您可以讀取螢幕方向狀態，在該狀態發生變化時獲得通知，並能夠透過螢幕方向 API將螢幕方向鎖定到特定狀態（通常是縱向或橫向）。

可以透過screenOrientation.type或透過orientation媒體功能使用 CSS 獲取方向資料。
當螢幕方向發生變化時，螢幕物件上會觸發change事件。
透過呼叫ScreenOrientation.lock()方法可以鎖定螢幕方向。
ScreenOrientation.unlock()方法會移除之前設定的所有螢幕鎖定。

注意：有關螢幕方向 API 的更多資訊，請參閱管理螢幕方向。

全屏

如果您需要以全屏模式顯示錶單，例如當您的表單顯示在博物館資訊亭、收費站或任何公開顯示的使用者介面上時，可以透過在該元素上呼叫Element.requestFullscreen()來實現。

const elem = document.getElementById("myForm");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
}

注意：要了解有關嚮應用程式新增全屏功能的更多資訊，請閱讀我們關於使用全屏模式的文件。

拖放

常見的使用者互動是在螢幕上物理拖動元素以將其放在其他位置。在選擇要上傳的檔案或重新排序頁面內的內容模組時，拖放可以幫助改善使用者體驗。有一個 API 可以做到這一點！

拖放 API 使使用者能夠單擊並按住滑鼠按鈕在元素上，將其拖動到另一個位置，然後釋放滑鼠按鈕以將元素放在那裡。

以下是一個允許拖動內容部分的示例。

html

<div
  draggable="true"
  ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')">
  This text <strong>may</strong> be dragged.
</div>

其中我們

將draggable屬性設定為 true，以便使您希望使其可拖動的元素可拖動。
新增對dragstart事件的偵聽器，並在該偵聽器中設定拖動資料。

注意：您可以在MDN 拖放文件中找到更多資訊。

contentEditable

通常，您應該在<form>中使用<textarea>或合適的<input>型別來從使用者那裡收集資料，以及描述性的<label>。但這些元素可能無法滿足您的需求。例如，富文字編輯器捕獲斜體、粗體和普通文字，但沒有本機表單控制元件捕獲富文字。此用例要求您建立一個可設定樣式且可編輯的自定義控制元件。有一個屬性可以做到這一點！

可以使用contenteditable屬性使任何 DOM 元素直接可編輯。

div {
  width: 300px;
  height: 130px;
  border: 1px solid gray;
}

html

<div contenteditable="true">This text can be edited by the user.</div>

contenteditable屬性會自動將元素新增到文件的預設選項卡順序中，這意味著不需要新增tabindex屬性。但是，當在建立您自己的表單控制元件時使用非語義元素進行資料輸入時，您需要新增 JavaScript 和ARIA，以便使用表單控制元件功能為其他所有內容改造元素。

為了提供良好的使用者體驗，您建立的任何自定義表單控制元件都必須可訪問並且像本機表單控制元件一樣工作

需要使用 ARIA 新增元素的role、label和description。
需要支援所有使用者輸入方法，包括鍵盤、滑鼠、觸控和指標事件，以上都已描述。
JavaScript 用於處理諸如驗證、提交和儲存使用者更新的內容等功能。

注意：可以在內容可編輯指南中找到示例和其他資源。