JavaScript

响应表单事件

您可以使用 JavaScript 来响应表单上的用户互动、显示其他表单字段、提交表单等。

假设您创建了一个调查问卷表单。在用户选择一个选项后您想再显示一次<input>来询问与所选内容相关的具体问题。如何仅显示相关的 <input> 元素？

只有当关联的 <input type="radio"> 当前处于选中状态时，才能使用 JavaScript 显示 <input>。

if (event.target.checked) {
    // show additional field
} else {
   // hide additional field
}

我们来看一下用于演示的 JavaScript 代码。您是否注意到 aria-controls 和 aria-expanded 属性？使用这些 ARIA 属性以帮助屏幕阅读器用户了解何时显示或隐藏其他表单控件。

假设您有一个评论表单。当读者添加评论并提交表单时，最好让用户无需刷新页面就能立即看到评论。

为此，请监听 onsubmit 事件，然后使用 event.preventDefault() 阻止默认行为，并使用 Fetch API 发送 FormData。

浏览器支持

注意：FormData 是一组表示表单字段及其值的键值对。您可以将所有表单字段添加到 FormData 对象，也可以仅发送部分表单字段及其值。

您的后端脚本可以检查 POST 请求是否看起来来自浏览器（使用表单元素的 action 属性，其中 method="post"）或来自 JavaScript，例如 fetch() 请求。

if (req.xhr || req.headers.accept.indexOf('json') !== -1) {
    // return JSON
} else {
    // return HTML
}

当有动态内容更改时，始终通知屏幕阅读器用户。将具有 aria-live="polite" 属性的元素添加到您的 HTML 中，并在更改后更新元素的内容。例如，在用户提交评论后，将文字更新为“Your review was successfully published”（您的评论已成功发布）。

默认错误消息的措辞因浏览器而异。如何确保向所有用户显示相同的消息？并确保广告内容与您网站的风格和基调相符？使用 setCustomValidity() Constraint Validation API 的方法定义您自己的错误消息

用于表单验证的内置 HTML 功能非常适合通知用户无效表单字段的问题。如果能够在用户离开表单字段后立即通知用户，岂不是很棒？

监听 blur 事件（在元素失去焦点时触发），并使用 ValidityState 接口，用于检测表单控件是否无效。

默认情况下，为 <input type="password"> 输入的文字会被遮盖，尊重用户隐私。通过显示一个 <button> 来切换是否显示所输入文本，帮助用户输入密码。

试用演示版。切换 显示密码 <button>，从而更改所输入文本的公开范围。运作方式是怎样的？点击显示密码，将密码字段的 type 属性从 type="password" 更改为 type="text"，，并将 <button> 文本更改为“隐藏密码”。

试试看 ：尝试改进显示密码图标 <button>。您应将 <button> 放在什么位置？您能否只使用一个图标，同时确保 <button> 可供访问？

请务必使显示密码按钮可供访问。使用 aria-controls 属性将 <button> 与 <input type="password"> 连接起来。

注意：并非每个屏幕阅读器都支持 aria-controls 属性，但对于支持该属性的屏幕阅读器来说，这是一项巨大的增强功能。

要通知屏幕阅读器用户当前是显示或隐藏密码，请执行以下操作：使用带有 aria-live="polite" 的隐藏元素，并相应地更改其文本。请务必让屏幕阅读器用户知道密码何时显示，以及何时对看屏幕的其他人显示。

<span class="visually-hidden" aria-live="polite">
    <!-- Dynamically change this text with JavaScript -->
</span>

注意：Microsoft Edge 会显示 <input type="password"> 的内置密码泄露控件。为防止出现两个显示按钮，请使用以下代码隐藏内置控件：css ::-ms-reveal { display: none } 详细了解如何自定义密码显示按钮。