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 属性可帮助屏幕阅读器用户了解何时显示或隐藏额外的表单控件。

注意：<input type="radio"> 的 aria-expanded 属性并非所有屏幕阅读器都能正确读出。

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

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

Browser Support

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

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

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

始终通知屏幕阅读器用户动态内容更改。向 HTML 添加具有 aria-live="polite" 属性的元素，并在发生更改后更新该元素的内容。例如，在用户提交评论后，将文本更新为“您的评论已成功发布”。

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

表单验证的内置 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 } 详细了解如何自定义显示密码按钮。