响应表单事件
您可以使用 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
。
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
您的后端脚本可以检查 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”(您的评论已成功发布)。
详细了解 ARIA 实时区域。
使用 JavaScript 进行验证
确保错误消息与您网站的风格和风格保持一致
默认错误消息的措辞因浏览器而异。
如何确保向所有用户显示相同的消息?
并确保广告内容与您网站的风格和基调相符?
使用 setCustomValidity()
Constraint Validation API 的方法
定义您自己的错误消息
确保实时通知用户有关错误
用于表单验证的内置 HTML 功能非常适合通知用户 无效表单字段的问题。 如果能够在用户离开表单字段后立即通知用户,岂不是很棒?
监听
blur
事件(在元素失去焦点时触发),并使用
ValidityState
接口,用于检测表单控件是否无效。
确保用户可以看到他们输入的密码
默认情况下,为 <input type="password">
输入的文字会被遮盖,
尊重用户隐私。
通过显示一个 <button>
来切换是否显示所输入文本,帮助用户输入密码。
试用演示版。切换
显示密码 <button>
,从而更改所输入文本的公开范围。
运作方式是怎样的?点击显示密码,
将密码字段的 type
属性从 type="password"
更改为 type="text"
,
,并将 <button>
文本更改为“隐藏密码”。
请务必使显示密码按钮可供访问。
使用 aria-controls
属性将 <button>
与 <input type="password">
连接起来。
要通知屏幕阅读器用户当前是显示或隐藏密码,请执行以下操作:
使用带有 aria-live="polite"
的隐藏元素,并相应地更改其文本。
请务必让屏幕阅读器用户知道密码何时显示,以及何时对看屏幕的其他人显示。
<span class="visually-hidden" aria-live="polite">
<!-- Dynamically change this text with JavaScript -->
</span>
详细了解如何实现显示密码选项。