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

2023-06-13前端开发问题

本文介绍了在模态或对话框内时，IE 中的新 Google reCAPTCHA 出现问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！

问题描述

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. :)

这篇关于在模态或对话框内时，IE 中的新 Google reCAPTCHA 出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！

The End

相关推荐

Fatal error: Call to a member function fetch_assoc() on a no

layui实现laydate日历控件控制之前日期不可选择

如何使用百度地图API获取地理位置信息

ajax请求获取json数据并处理的实例代码

js删除数组中指定元素的5种方法

layui 实现实时刷新一个外部的div

热门文章

热门精品源码

最新VIP资源