使用者輸入方法和控制

涵蓋的主題

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

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

支援常見的輸入機制

鍵盤

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

如果您想新增額外的鍵盤支援，例如在按下特定鍵時驗證表單控制元件，您可以使用事件監聽器捕獲和響應鍵盤事件。例如，如果您想在按下任何鍵時新增控制元件，您需要在 window 物件上新增一個事件監聽器

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

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

滑鼠

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

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

手指觸控

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

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

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

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

指標事件

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

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

實現控制元件

螢幕方向

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

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

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

全屏

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

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

拖放

一種常見的使用者互動是將元素物理拖動到螢幕上的其他位置。拖放有助於改善使用者體驗，例如選擇要上傳的檔案或在頁面中重新排序內容模組。為此有一個 API！

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

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

<div draggable="true">This text <strong>may</strong> be dragged.</div>

document.querySelector("div").addEventListener("dragstart", (event) => {
  event.dataTransfer.setData("text/plain", "This text may be dragged.");
});

其中我們

• 在您希望使其可拖動的元素上將 draggable 屬性設定為 true。
• 新增一個 dragstart 事件的監聽器，並在該監聽器中設定拖動資料。

contentEditable

通常，您應該在 <form> 中使用 <textarea> 或適當的 <input> 型別來收集使用者資料，並附帶一個描述性的 <label>。但這些元素可能無法滿足您的需求。例如，富文字編輯器可以捕獲斜體、粗體和普通文字，但沒有原生表單控制元件可以捕獲富文字。這種用例要求您建立一個可樣式化_且_可編輯的自定義控制元件。為此有一個屬性！

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

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

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

contenteditable 屬性會自動將元素新增到文件的預設製表符順序中，這意味著不需要新增 tabindex 屬性。然而，當建立自己的表單控制元件時，如果使用非語義元素進行資料輸入，您將需要新增 JavaScript 和 ARIA 來為元素提供表單控制元件功能。

為了提供良好的使用者體驗，您建立的任何自定義表單控制元件都必須具有可訪問性並像原生表單控制元件一樣執行

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

教程

• 觸控事件指南
• 管理螢幕方向
• 使用全屏模式
• 拖動操作指南
• 表單驗證
• 透過 JavaScript 傳送表單

參考

• MouseEvent 介面
• KeyboardEvent 介面
• 觸控事件 API
• 指標鎖定 API
• 螢幕方向 API
• 全屏 API
• 拖放 API
• HTML contenteditable 屬性