用户输入方法和控件

• 为了支持触摸屏显示，触摸事件 解释了移动设备、冰箱面板、博物馆信息亭显示器等基于触摸的用户界面上的手指活动。
• 全屏 API 允许您以全屏模式显示内容，如果您在冰箱或博物馆信息亭上提供表单，则需要此功能。
• 当您需要创建自定义表单控件（如富文本编辑器）时，contentEditable 属性可以从通常不可编辑的 HTML 元素创建可编辑控件。
• 拖放 API 允许用户在页面上拖动元素并将其放在不同的位置。在选择要上传的文件或重新排序页面内的内容模块时，这有助于改善用户体验。
• 当屏幕方向对您的布局很重要时，您可以使用CSS 媒体查询根据浏览器方向设置表单的样式，甚至可以使用屏幕方向 API读取屏幕方向状态并执行其他操作。

以下部分提供了一组建议和最佳实践，以使尽可能多的用户能够使用您的网站和应用程序。

大多数用户将使用键盘在表单控件中输入数据。有些人还会使用键盘导航到这些表单控件。为了实现可访问性和更好的用户体验，正确标记所有表单控件非常重要。当每个表单控件都正确关联了<label>时，您的表单将对所有人完全可访问，最值得注意的是任何使用键盘、屏幕阅读器以及可能根本没有屏幕的人。

如果您想添加其他键盘支持，例如在按下特定键时验证表单控件，您可以使用事件侦听器捕获并响应键盘事件。例如，如果您想在按下任何键时添加控件，则需要在窗口对象上添加一个事件侦听器

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

handleKeyDown 和 handleKeyUp 是定义在触发 keydown 和 keyup 事件时要执行的控制逻辑的函数。

您还可以捕获鼠标和其他指针事件。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()方法会移除之前设置的所有屏幕锁定。

如果您需要以全屏模式显示表单，例如当您的表单显示在博物馆信息亭、收费站或任何公开显示的用户界面上时，可以通过在该元素上调用Element.requestFullscreen()来实现。

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

常见的用户交互是在屏幕上物理拖动元素以将其放在其他位置。在选择要上传的文件或重新排序页面内的内容模块时，拖放可以帮助改善用户体验。有一个 API 可以做到这一点！

拖放 API 使用户能够单击并按住鼠标按钮在元素上，将其拖动到另一个位置，然后释放鼠标按钮以将元素放在那里。

以下是一个允许拖动内容部分的示例。

<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事件的侦听器，并在该侦听器中设置拖动数据。

通常，您应该在<form>中使用<textarea>或合适的<input>类型来从用户那里收集数据，以及描述性的<label>。但这些元素可能无法满足您的需求。例如，富文本编辑器捕获斜体、粗体和普通文本，但没有本机表单控件捕获富文本。此用例要求您创建一个可设置样式且可编辑的自定义控件。有一个属性可以做到这一点！

可以使用contenteditable属性使任何 DOM 元素直接可编辑。

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，以便使用表单控件功能为其他所有内容改造元素。

为了提供良好的用户体验，您创建的任何自定义表单控件都必须可访问并且像本机表单控件一样工作

• 需要使用 ARIA 添加元素的role、label和description。
• 需要支持所有用户输入方法，包括键盘、鼠标、触摸和指针事件，以上都已描述。
• JavaScript 用于处理诸如验证、提交和保存用户更新的内容等功能。

• 触摸事件指南
• 管理屏幕方向

• 使用全屏模式
• 拖拽操作指南
• 表单验证
• 通过 JavaScript 发送表单

• MouseEvent 接口
• KeyboardEvent 接口
• 触摸事件 API
• 指针锁定 API
• 屏幕方向 API
• 全屏 API
• 拖放 API
• HTML contenteditable 属性