Question

reCAPTCHA在Chrome中运行良好。

但是，（仅当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>

Answer 1

问题是由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 html（如何知道是否e.target是recaptcha的一个元素？）。

我的解决方案是完全禁用此行为，为此，只需使用空函数覆盖enforceFocus函数：

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

一个更优雅的解决方案是apreciated。：）

Answer 2

旧的recaptcha，即版本1.0在模态

上正常工作

Answer 3

要通过'Digibusiness'跟进响应，更优雅的是用实际的覆盖整个引导功能（在你的页面加载 - document.ready函数将是一个好地方）。通过这种方式，您只能在覆盖时仅参考IE浏览器+仅加载到模态上加载的iframe，因此不会因为特定的iframe-over-modal-on-而在整个网站上锁定可访问性（现在已成为一件大事）特定浏览器功能修复。

代码如下：

if (window.navigator.userAgent.indexOf("MSIE ") > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {  // If Internet Explorer
    $.fn.modal.Constructor.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) {
                if (e.target.nodeName !== "IFRAME") {
                    this.$element.trigger('focus')
                }
            }
        }, this))
    }
}

在内部模态或对话框中，IE中新的Google reCAPTCHA存在问题

3 个答案: