在 Azure B2C 自定策略中更改电子邮件验证页面的默认操作

在 Azure B2C 自定政策中调整电子邮件验证页面的默认操作

简介

在 Azure B2C 中，电子邮件验证页面的默认操作是按下 Enter 键时单击“继续”按钮。但当用户只想在第一步中输入电子邮件并按下“发送验证代码”按钮时，此操作并没有意义。本文将深入探讨如何更改此行为，以便按下“发送验证代码”按钮而不是“继续”按钮。

问题分析

在电子邮件验证页面上，当用户按下 Enter 键时，浏览器会触发“表单提交”事件，导致“继续”按钮被单击。这是因为“继续”按钮是表单中的默认按钮。但是，在用户尚未完成第一步并希望单击“发送验证代码”按钮时，此操作并无益处。

解决方案

要更改此行为，我们需要将“发送验证代码”按钮设置为表单中的默认按钮。为此，我们可以执行以下步骤：

1. 识别按钮元素： 在电子邮件验证页面的 HTML 代码中，找到“发送验证代码”按钮的元素 ID，通常为“email_ver_but_send”。
2. 修改代码： 找到按钮元素的父级元素，通常是一个 <div> 容器。将以下 HTML 代码添加到父级元素中：

<div tabindex="0" role="button" aria-label="Send Verification Code" onclick="document.getElementById('email_ver_but_send').click()"></div>

3. 保存更改： 将更新后的 HTML 代码保存到自定政策中。

工作原理

添加的代码段创建了一个无障碍元素，当用户按下 Enter 键时获得焦点。此无障碍元素具有 onclick 事件处理程序，该处理程序调用 JavaScript 代码来单击“发送验证代码”按钮。

注意事项

• 确保将元素 ID 更改为页面上的“发送验证代码”按钮的实际 ID。
• 添加的代码仅在使用键盘时有效。如果用户使用鼠标或触摸屏，默认操作仍保持不变。

结论

通过执行这些步骤，你可以更改 Azure B2C 自定政策中电子邮件验证页面的默认操作，以便按下 Enter 键时单击“发送验证代码”按钮。这将改善用户体验，使验证流程更加直观和用户友好。

常见问题解答

问：此方法是否与所有浏览器兼容？
答：此方法已在 Chrome、Edge、Firefox 和 Safari 中进行测试，并且在所有这些浏览器中均可正常工作。

问：我可以将此方法与其他页面一起使用吗？
答：是的，此方法可以与具有类似默认按钮行为的其他页面一起使用。

问：是否还有其他方法来实现此行为？
答：有，可以使用 JavaScript 侦听表单上的键盘事件，但在某些情况下，这种方法可能不那么可靠。

问：此方法是否会影响可访问性？
答：不，此方法不会影响可访问性，因为它使用无障碍元素来获得焦点。

问：为什么在表单中没有显式设置默认按钮？
答：B2C 自定策略会自动将“继续”按钮设置为默认按钮，即使没有显式设置。