在模态或对话框内时，IE 中的新 Google reCAPTCHA 出现问题

2022-01-17 00:00:00 recaptcha internet-explorer modal-dialog javascript twitter-bootstrap

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的modal组件产生的.

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"事件以确保焦点仍在模态框内；如果焦点转到模态之外的另一个元素，则后者立即将其取回.
因此，当您在 recaptcha 表单内单击时，焦点冲突会导致 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.

无论如何，一种可能的解决方案是在recaptcha 组件获得焦点时覆盖该方法并禁用焦点返回行为，但这很难做到，因为无法控制recaptcha 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 () { };

希望有更优雅的解决方案.:)

A more elegant solution would be apreciated. :)

相关文章