我需要在弹出(模态)对话框中打开谷歌最新的reCAPTCHA小部件,在我的情况下是Dojo对话框,我已经很好地工作了,但我刚刚意识到用户无法通过键盘导航到它。
当reCAPTCHA小部件显示在主视图中,而不是模式对话框中时,用户当然可以轻松地通过键盘导航到它
有没有人找到一种方法来将焦点放在reCAPTCHA小部件上,这样当reCAPTCHA在Dojo对话框中时,用户就可以不用鼠标访问它?
我确实看到reCAPTCHA是在<iframe>
中生成的。键盘导航无法访问iframe中的内容,这是障碍的一部分吗?我甚至尝试调用document.getElementById("recatcha-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>
试试这把小提琴。通常,Dijit对话框中的iframe不能很好地工作,因为它不知道如何解析iframe中的内容。在这种情况下,我们可以使用Dojo的一些函数来解决它。需要指出的一点是,我禁用了Dijit对话框的autofocus
,这样它就不会自动将closeNode集中在对话框中。
对话框加载后,选项卡>空格将选择captcha。
这可能会帮助其他面临类似问题的人,但使用Bootstrap模式对话框。我在GitHub上找到了以下解决方案。添加以下Javascript来覆盖引导:
引导3x
$.fn.modal.Constructor.prototype.enforceFocus = function () { };
引导4次
$.fn.modal.Constructor.prototype._enforceFocus = function () { };