Phương thức và điều khiển đầu vào người dùng

Các chủ đề được đề cập

• Để hỗ trợ màn hình cảm ứng, sự kiện chạm diễn giải hoạt động ngón tay trên giao diện người dùng dựa trên chạm từ thiết bị di động, đến bảng điều khiển tủ lạnh, đến màn hình kiosk bảo tàng.
• API Fullscreen cho phép bạn hiển thị nội dung của mình ở chế độ toàn màn hình, điều này cần thiết nếu biểu mẫu của bạn đang được phục vụ trên tủ lạnh hoặc kiosk bảo tàng.
• Khi bạn cần tạo điều khiển biểu mẫu tùy chỉnh, chẳng hạn như trình chỉnh sửa văn bản phong phú, thuộc tính contentEditable cho phép tạo các điều khiển có thể chỉnh sửa từ các phần tử HTML thường không thể chỉnh sửa.
• API Drag and Drop cho phép người dùng kéo các phần tử xung quanh trang và thả chúng ở các vị trí khác nhau. Điều này có thể giúp cải thiện trải nghiệm người dùng khi chọn tệp để tải lên hoặc sắp xếp lại các mô-đun nội dung trong trang.
• Khi hướng màn hình quan trọng đối với bố cục của bạn, bạn có thể sử dụng truy vấn phương tiện CSS để tạo kiểu cho biểu mẫu của bạn dựa trên hướng trình duyệt, hoặc thậm chí sử dụng API Screen Orientation để đọc trạng thái hướng màn hình và thực hiện các hành động khác.

Các phần sau cung cấp một bộ khuyến nghị và thực hành tốt nhất để cho phép tập hợp người dùng rộng nhất có thể sử dụng các trang web và ứng dụng của bạn.

Hỗ trợ các phương thức đầu vào phổ biến

Bàn phím

Hầu hết người dùng sẽ sử dụng bàn phím để nhập dữ liệu vào các điều khiển biểu mẫu của bạn. Một số người cũng sẽ sử dụng bàn phím để điều hướng đến các điều khiển biểu mẫu đó. Để có thể truy cập và để trải nghiệm người dùng tốt hơn, điều quan trọng là phải nhãn đúng tất cả các điều khiển biểu mẫu. Khi mỗi điều khiển biểu mẫu có <label> được liên kết chính xác, biểu mẫu của bạn sẽ hoàn toàn có thể truy cập cho tất cả mọi người, đặc biệt là bất kỳ ai điều hướng biểu mẫu của bạn bằng bàn phím, trình đọc màn hình, và có thể không có màn hình nào cả.

Nếu bạn muốn thêm hỗ trợ bàn phím bổ sung, chẳng hạn như xác thực điều khiển biểu mẫu khi một phím cụ thể được nhấn, bạn có thể sử dụng trình lắng nghe sự kiện để nắm bắt và phản ứng với các sự kiện bàn phím. Ví dụ, nếu bạn muốn thêm điều khiển khi bất kỳ phím nào được nhấn, bạn cần thêm trình lắng nghe sự kiện trên đối tượng window:

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

handleKeyDown và handleKeyUp là các hàm xác định logic điều khiển cần thực thi khi các sự kiện keydown và keyup được kích hoạt.

Chuột

Bạn cũng có thể bắt các sự kiện chuột và con trỏ khác. Các sự kiện xảy ra khi người dùng tương tác với thiết bị trỏ như chuột được đại diện bởi Giao diện DOM MouseEvent. Các sự kiện chuột phổ biến bao gồm click, dblclick, mouseup và mousedown. Danh sách tất cả các sự kiện sử dụng Giao diện Sự kiện Chuột được cung cấp trong hướng dẫn sự kiện DOM.

Khi thiết bị đầu vào là chuột, bạn cũng có thể kiểm soát đầu vào người dùng thông qua API Pointer Lock và thực hiện Drag & Drop (xem bên dưới). Bạn cũng có thể sử dụng CSS để kiểm tra hỗ trợ thiết bị con trỏ.

Chạm bằng ngón tay

Để cung cấp hỗ trợ bổ sung cho các thiết bị màn hình cảm ứng, tốt nhất là xem xét các khả năng khác nhau về độ phân giải màn hình và đầu vào người dùng. Sự kiện chạm có thể giúp bạn triển khai các phần tử tương tác và các cử chỉ tương tác phổ biến trên các thiết bị màn hình cảm ứng.

Nếu bạn muốn sử dụng sự kiện chạm, bạn cần thêm trình lắng nghe sự kiện và chỉ định các hàm xử lý, sẽ được gọi khi sự kiện được kích hoạt:

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

trong đó element là phần tử DOM bạn muốn đăng ký sự kiện chạm.

Sự kiện con trỏ

Chuột không phải là thiết bị trỏ duy nhất. Thiết bị của người dùng có thể tích hợp nhiều dạng đầu vào, như chuột, chạm bằng ngón tay và nhập bút. Mỗi con trỏ này có kích thước khác nhau. API Pointer Events có thể hữu ích nếu bạn cần quản lý sự kiện trên các thiết bị bằng cách chuẩn hóa việc xử lý từng thiết bị. Con trỏ có thể là bất kỳ điểm tiếp xúc nào trên màn hình được tạo bởi con trỏ chuột, bút, chạm (bao gồm đa chạm), hoặc thiết bị đầu vào trỏ khác.

Các sự kiện để xử lý đầu vào con trỏ chung trông rất giống những sự kiện dành cho chuột: pointerdown, pointermove, pointerup, pointerover, pointerout, v.v. Giao diện PointerEvent cung cấp tất cả các chi tiết bạn có thể muốn nắm bắt về thiết bị con trỏ, bao gồm kích thước, áp lực và góc của nó.

Triển khai điều khiển

Hướng màn hình

Nếu bạn cần bố cục hơi khác nhau tùy thuộc vào việc người dùng ở chế độ dọc hay ngang, bạn có thể sử dụng truy vấn phương tiện CSS để xác định CSS cho các bố cục khác nhau hoặc chiều rộng điều khiển biểu mẫu dựa trên kích thước hoặc hướng của màn hình khi tạo kiểu biểu mẫu web.

Khi hướng màn hình quan trọng đối với biểu mẫu của bạn, bạn có thể đọc trạng thái hướng màn hình, được thông báo khi trạng thái này thay đổi, và có thể khóa hướng màn hình vào một trạng thái cụ thể (thường là dọc hoặc ngang) thông qua API Screen Orientation.

• Dữ liệu hướng có thể được lấy thông qua screenOrientation.type hoặc với CSS thông qua tính năng phương tiện orientation.
• Khi hướng màn hình thay đổi, sự kiện change được kích hoạt trên đối tượng screen.
• Việc khóa hướng màn hình được thực hiện bằng cách gọi phương thức ScreenOrientation.lock().
• Phương thức ScreenOrientation.unlock() xóa tất cả các khóa màn hình trước đó đã được đặt.

Toàn màn hình

Nếu bạn cần trình bày biểu mẫu của mình ở chế độ toàn màn hình, chẳng hạn như khi biểu mẫu của bạn được hiển thị trên kiosk bảo tàng, trạm thu phí, hoặc thực sự bất kỳ giao diện người dùng hiển thị công khai nào, bạn có thể làm như vậy bằng cách gọi Element.requestFullscreen() trên phần tử đó:

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

Drag & Drop

Một tương tác người dùng phổ biến là kéo vật lý các phần tử để thả ở nơi khác trên màn hình. Drag and drop có thể giúp cải thiện trải nghiệm người dùng khi chọn tệp để tải lên hoặc sắp xếp lại các mô-đun nội dung trong trang. Có một API cho điều đó!

API Drag & Drop cho phép người dùng nhấp và giữ nút chuột trên một phần tử, kéo nó đến một vị trí khác và thả nút chuột để thả phần tử đó ở đó.

Đây là một ví dụ cho phép một phần nội dung được kéo.

<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.");
});

trong đó chúng ta:

• Đặt thuộc tính draggable thành true trên phần tử mà bạn muốn làm có thể kéo.
• Thêm trình lắng nghe cho sự kiện dragstart và đặt dữ liệu kéo trong trình lắng nghe này.

contentEditable

Thông thường, bạn nên sử dụng <textarea> hoặc loại <input> thích hợp trong <form> để thu thập dữ liệu từ người dùng, cùng với <label> mô tả. Nhưng các phần tử này có thể không đáp ứng nhu cầu của bạn. Ví dụ, các trình chỉnh sửa văn bản phong phú nắm bắt văn bản in nghiêng, đậm và bình thường, nhưng không có điều khiển biểu mẫu gốc nào nắm bắt văn bản phong phú. Trường hợp sử dụng này yêu cầu bạn tạo điều khiển tùy chỉnh có thể tạo kiểu và có thể chỉnh sửa. Có một thuộc tính cho điều đó!

Bất kỳ phần tử DOM nào cũng có thể được làm có thể chỉnh sửa trực tiếp bằng thuộc tính contenteditable.

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

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

Thuộc tính contenteditable tự động thêm phần tử vào thứ tự tab mặc định của tài liệu, có nghĩa là thuộc tính tabindex không cần được thêm. Tuy nhiên, khi sử dụng các phần tử không có ngữ nghĩa để nhập dữ liệu khi tạo các điều khiển biểu mẫu tùy chỉnh của riêng bạn, bạn sẽ cần thêm JavaScript và ARIA để trang bị lại phần tử với chức năng điều khiển biểu mẫu cho mọi thứ khác.

Để cung cấp trải nghiệm người dùng tốt, bất kỳ điều khiển biểu mẫu tùy chỉnh nào bạn tạo phải có thể truy cập và hoạt động như các điều khiển biểu mẫu gốc:

• role, nhãn và mô tả của phần tử cần được thêm bằng ARIA.
• Tất cả các phương thức đầu vào người dùng cần được hỗ trợ, bao gồm bàn phím, chuột, chạm và sự kiện con trỏ, tất cả được mô tả ở trên.
• JavaScript được yêu cầu để xử lý chức năng như xác thực, gửi và lưu nội dung được cập nhật bởi người dùng.

Hướng dẫn

• Hướng dẫn sự kiện chạm
• Quản lý hướng màn hình
• Sử dụng chế độ toàn màn hình
• Hướng dẫn thao tác kéo
• Xác thực biểu mẫu
• Gửi biểu mẫu qua JavaScript

Tham chiếu

• Giao diện MouseEvent
• Giao diện KeyboardEvent
• API Sự kiện chạm
• API Pointer Lock
• API Screen Orientation
• API Fullscreen
• API Drag & Drop
• Thuộc tính HTML contenteditable