如何在模式对话框中通过键盘导航到 reCAPTCHA？
How to keyboard navigate to reCAPTCHA in a modal dialog?
我需要在弹出式（模态）对话框中打开 Google 的最新 reCAPTCHA 小部件，在我的例子中是 Dojo 对话框，我的工作正常，但我刚刚意识到用户无法通过键盘导航到它。
当 reCAPTCHA 小部件显示在主视图中而不是模态对话框中时，用户当然可以轻松地通过键盘导航到它。
有没有人找到一种方法来将焦点设置在 reCAPTCHA 小部件上，以便当 reCAPTCHA 在 Dojo 对话框中时用户无需鼠标即可访问它？
我确实看到 reCAPTCHA 是在 <iframe> 中生成的。这是障碍的一部分——键盘导航无法到达 iframe 中的内容吗？我什至尝试调用 document.getElementById("recaptcha-anchor") 因为我看到那是 "checkbox" 的 <span> 的 ID - 但它返回 null。如何到达 iframe 中的元素？
我在
有一个 jsfiddle 示例可用于演示
https://jsfiddle.net/gregorco/xqs8w5pm/5/
<script>
var onloadCaptchaCallback = function() {
console.log("jsfiddle: rendering captcha");
globalRecaptchaWidgetId = grecaptcha.render('captchaDiv', {
'sitekey' : '6LcgSAMTAAAAACc2C7rc6HB9ZmEX4SyB0bbAJvTG',
'callback' : verifyCaptchaCallback,
'tabindex' : 2
});
grecaptcha.reset();
}
var verifyCaptchaCallback = function(g_recaptcha_response) {
console.log("Response validated. Not a robot.");
};
</script>
<script src='https://www.google.com/recaptcha/api.js?onload=onloadCaptchaCallback&render=explicit' async defer></script>
<div id="testDiv">
<button type="dojo/form/Button" onClick="captchaPopup.show();">Open reCAPTCHA</button>
</div>
<div data-dojo-type="dijit/Dialog" data-dojo-id="captchaPopup" title="Human Verification" style="width:350px;">
Cannot keyboard navigate to the checkbox!
<table>
<tr>
<td>
<div id="captchaDiv"></div><br/>
</td>
</tr>
</table>
</div>
试试这个 fiddle。通常 Dijit 对话框与其中的 iframe 配合得不太好，因为它不知道如何解析 iframe 中的内容。在这种情况下，我们可以使用 Dojo 的一些功能来解决它。需要指出的一件值得注意的事情是，我已经禁用了 Dijit 对话框的 autofocus，这样它就不会自动聚焦对话框中的 closeNode。
对话框加载后，选项卡>space 将select 验证码。
这可能会帮助其他面临类似问题的人，但使用 Bootstrap 模态对话框。我在 GitHub 上找到了以下解决方案。添加以下 Javascript 以覆盖 Bootstrap：
Bootstrap 3x
$.fn.modal.Constructor.prototype.enforceFocus = function () { };
Bootstrap 4x
$.fn.modal.Constructor.prototype._enforceFocus = function () { };
我需要在弹出式（模态）对话框中打开 Google 的最新 reCAPTCHA 小部件，在我的例子中是 Dojo 对话框，我的工作正常，但我刚刚意识到用户无法通过键盘导航到它。
当 reCAPTCHA 小部件显示在主视图中而不是模态对话框中时，用户当然可以轻松地通过键盘导航到它。
有没有人找到一种方法来将焦点设置在 reCAPTCHA 小部件上，以便当 reCAPTCHA 在 Dojo 对话框中时用户无需鼠标即可访问它？
我确实看到 reCAPTCHA 是在 <iframe> 中生成的。这是障碍的一部分——键盘导航无法到达 iframe 中的内容吗？我什至尝试调用 document.getElementById("recaptcha-anchor") 因为我看到那是 "checkbox" 的 <span> 的 ID - 但它返回 null。如何到达 iframe 中的元素？
我在
有一个 jsfiddle 示例可用于演示https://jsfiddle.net/gregorco/xqs8w5pm/5/
<script>
var onloadCaptchaCallback = function() {
console.log("jsfiddle: rendering captcha");
globalRecaptchaWidgetId = grecaptcha.render('captchaDiv', {
'sitekey' : '6LcgSAMTAAAAACc2C7rc6HB9ZmEX4SyB0bbAJvTG',
'callback' : verifyCaptchaCallback,
'tabindex' : 2
});
grecaptcha.reset();
}
var verifyCaptchaCallback = function(g_recaptcha_response) {
console.log("Response validated. Not a robot.");
};
</script>
<script src='https://www.google.com/recaptcha/api.js?onload=onloadCaptchaCallback&render=explicit' async defer></script>
<div id="testDiv">
<button type="dojo/form/Button" onClick="captchaPopup.show();">Open reCAPTCHA</button>
</div>
<div data-dojo-type="dijit/Dialog" data-dojo-id="captchaPopup" title="Human Verification" style="width:350px;">
Cannot keyboard navigate to the checkbox!
<table>
<tr>
<td>
<div id="captchaDiv"></div><br/>
</td>
</tr>
</table>
</div>
试试这个 fiddle。通常 Dijit 对话框与其中的 iframe 配合得不太好，因为它不知道如何解析 iframe 中的内容。在这种情况下，我们可以使用 Dojo 的一些功能来解决它。需要指出的一件值得注意的事情是，我已经禁用了 Dijit 对话框的 autofocus，这样它就不会自动聚焦对话框中的 closeNode。
对话框加载后，选项卡>space 将select 验证码。
这可能会帮助其他面临类似问题的人，但使用 Bootstrap 模态对话框。我在 GitHub 上找到了以下解决方案。添加以下 Javascript 以覆盖 Bootstrap：
Bootstrap 3x
$.fn.modal.Constructor.prototype.enforceFocus = function () { };
Bootstrap 4x
$.fn.modal.Constructor.prototype._enforceFocus = function () { };