在内部模态或对话框中,IE中新的Google reCAPTCHA存在问题
Mut*_*uni 11 javascript internet-explorer modal-dialog recaptcha twitter-bootstrap
reCAPTCHA在Chrome中运行良好.
但是,(在IE中,只有当reCAPTCHA iframe位于对话框或模态内时)占位符才会消失.
无论用户写什么都被认为是占位符的一部分(我认为),并且不会点击"验证"按钮.
图片说明了这一点:
当我在模态之外使用recaptcha div时,相同的代码在所有浏览器中都能很好地工作
<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>
Dig*_*ess 17
问题是由Bootstrap的模态组件生成的.
当模态即将出现时,调用此函数:
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"事件,以确保焦点仍在模态内; 如果焦点转移到模态之外的另一个元素,则后者立即获得它.
因此,当您在recaptcha表单内部单击时,焦点'冲突会导致Internet Explorer错误.
无论如何,一个可能的解决方案是重写该方法并在recaptcha组件获得焦点时禁用焦点回复行为,但这很难做到,因为无法控制recaptcha html(你怎么知道是否e.target是一个元素recaptcha？).
我的解决方案是完全禁用此行为,为此,只需使用空函数覆盖enforceFocus函数:
$.fn.modal.Constructor.prototype.enforceFocus = function () { };
一个更优雅的解决方案是apreciated.:)
- 显然这个enforceFocus方法是"仅"用于可访问性目的https://github.com/twbs/bootstrap/issues/4781也可以为IE禁用这个函数conditionnaly:if(/MSIE|Trident/.test(window.navigator.用户代理)) (2认同)
| 归档时间： |
|
| 查看次数： |
7526 次 |
| 最近记录： |