在内部模态或对话框中，IE中新的Google reCAPTCHA存在问题 [英] Problems with new Google reCAPTCHA in IE when inside modal or dialog
问题描述
reCAPTCHA在Chrome中效果非常好。
reCAPTCHA works perfectly well in Chrome.
然而，（只有当reCAPTCHA iframe位于对话框或模态中时）IE中的占位符不会消失。
However, (only when reCAPTCHA iframe is inside a dialog box or a modal) in IE the placeholder won't go away.
用户所写的内容被认为是占位符的一部分（我认为），并且不会启用验证按钮。
Whatever the user writes is considered part of the placeholder (I think) and the "verify" button won't be enabled to be clicked.
图片说明了这一点：
当我在模态之外使用recaptcha div时，相同的代码在所有浏览器中运行良好
The same code works perfectly well in all browsers when I take the recaptcha div outside the modal
<html lang="en">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
var onloadCallback = function() {
grecaptcha.render('html_element', {
'sitekey' : '6Lc7PAATAAAAAE7JwcA7tNEDIrczjCCUvi3GiK4L'
});
};
</script>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form action="?" method="POST">
<div id="html_element"></div>
<br>
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</div>
</body>
</html>
推荐答案
问题是由Bootstrap的模态组件生成的。
The problem is generated by the the modal component of Bootstrap.
当模态即将出现时，调用此函数：
When the modal is about to appear this function is called:
Modal.prototype.enforceFocus = function () {
$(document)
.off('focusin.bs.modal') // guard against infinite focus loop
.on('focusin.bs.modal', $.proxy(function (e) {
if (this.$element[0] !== e.target && !this.$element.has(e.target).length) {
this.$element.trigger('focus')
}
}, this))
}
该函数在文档中添加focusin事件，以确保焦点仍在模态内;如果焦点转移到模态之外的另一个元素，则后者立即获取它。
因此，当您在重新填充表单内部单击时，焦点'冲突会导致Internet Explorer错误。
The function adds a "focusin" event to the document to be sure that the focus is still inside the modal; if the focus goes to another element outside the modal then the latter immediately obtain it back.
Therefore, when you click inside the recaptcha form the focus' conflict causes the Internet Explorer bug.
无论如何，一种可能的解决方案是重写该方法并在重新接收组件获得焦点时禁用焦点回复行为，但这很难做到，因为无法控制重新接收html（你怎么知道 e.target 是recaptcha的一个元素？）。
Anyway, one possible solution is to override that method and disable the focus-back behaviour when a recaptcha component obtain the focus, but this is quite difficult to do because there is no control over the recaptcha html (how can you know if e.target is an element of recaptcha?).
我的解决方案是完全禁用此行为，要执行此操作只需使用空函数覆盖enforceFocus函数：
My solution is to completely disable this behavior, to do this just override the enforceFocus function with an empty function:
$.fn.modal.Constructor.prototype.enforceFocus = function () { };
更优雅的解决方案是apreciated。 ：）
A more elegant solution would be apreciated. :)
这篇关于在内部模态或对话框中，IE中新的Google reCAPTCHA存在问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
