如何在模态对话框中键盘导航到reCAPTCHA?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在模态对话框中键盘导航到reCAPTCHA?相关的知识,希望对你有一定的参考价值。

我需要在一个弹出窗口(模态)对话框中打开Goog​​le最新的reCAPTCHA小部件,在我的情况下是一个Dojo对话框,我的工作正常,但我只是意识到用户无法通过键盘导航到它。

当reCAPTCHA小部件显示在主视图中而不是模式对话框时,用户当然可以轻松地将键盘导航到它。

有没有人找到一种方法来设置焦点在reCAPTCHA小部件上,以便当reCAPTCHA在Dojo对话框中时用户可以不用鼠标访问它?

我确实看到reCAPTCHA是在<iframe>中生成的。这是障碍的一部分 - 键盘导航无法访问iframe中的内容吗?我甚至试图调用document.getElementById(“recaptcha-anchor”),因为我看到那是持有“复选框”的<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 Dialog的autofocus,因此它不会自动将closeNode聚焦在对话框中。

加载对话框后,tab> space将选择验证码。

另一答案

这可能有助于其他人面临类似问题,但使用Bootstrap模式对话框。我在GitHub上找到了以下解决方案。添加以下javascript以覆盖Bootstrap:

Bootstrap 3x

$.fn.modal.Constructor.prototype.enforceFocus = function () { };

Bootstrap 4x

$.fn.modal.Constructor.prototype._enforceFocus = function () { };

以上是关于如何在模态对话框中键盘导航到reCAPTCHA?的主要内容,如果未能解决你的问题,请参考以下文章

Bootstrap 模态对话框选项卡在后面的页面中

WPF - Prism 7.1 - 导航 - 掌握选项卡控件 - 模态/对话框窗口

vc++6.0如何实现在模态对话框编辑框中输入数据,单击确定按钮将数据添加到组合框按钮中!

如何以模态方式呈现 VC,然后转到嵌入在导航控制器中的 VC

在 R 闪亮中,如何将滚动合并到模式对话框中?

状态栏处于“通话中”模式时显示模式对话框后导航栏位置错误