用户输入方法和控制

涵盖的主题

• 为了支持触摸屏显示器，触摸事件解释了从移动设备到冰箱面板，再到博物馆信息亭显示器的基于触摸的用户界面上的手指活动。
• 全屏 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 属性