Как переместить клавиатуру в reCAPTCHA в модальном диалоговом окне?

Question

Мне нужно открыть последний виджет reCAPTCHA Google в всплывающем (модальном) диалоге, Dojo Dialog в моем случае, и у меня это нормально работает, но я просто понял, что пользователь не может переключиться на клавиатуру.

Когда виджет reCAPTCHA отображается в главном представлении, а не модальном диалоговом окне, то, конечно, пользователь может легко перейти к нему.

Кто-нибудь нашел способ установить фокус на виджет reCAPTCHA, чтобы пользователь мог получить к нему доступ без мыши, когда reCAPTCHA находится в Dojo Dialog?

Я видел, что reCAPTCHA генерируется в пределах . Является ли это частью препятствия - что клавиатурная навигация не может достичь контента внутри iframe? Я даже пытался вызвать document.getElementById («recaptcha-anchor»), так как увидел, что это идентификатор <span>, который содержит «флажок», но это возвращает 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> 

Answer 1

Подари это fiddle попробовать. Обычно диалоги Dijit не слишком хорошо работают с iframe в них, потому что они не знают, как анализировать содержимое внутри iframe. В этом случае мы можем использовать некоторые из функций Dojo, чтобы обойти его. Примечательно, что я отключил autofocus Dijit Dialog, чтобы он не автоматически фокусировал closeNode внутри диалогового окна.

После того, как диалог загрузится, вкладка> пробел выберет капчу.