モーダルまたはダイアログ内の新しいGoogle reCAPTCHAのIEでの問題

reCAPTCHAはChromeでうまく動作します。モーダルまたはダイアログ内の新しいGoogle reCAPTCHAのIEでの問題

ただし、IEで（reCAPTCHA iframeがダイアログボックスまたはモーダルにある場合のみ）、プレースホルダは表示されません。

ユーザーが書き込むものはすべてプレースホルダの一部とみなされます（私は思う）、「確認」ボタンはクリックできません。

絵はこれを説明します、私はモーダル

<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>

出典

2015-01-11 Mutaz Ghuni

旧reCAPTCHAの外にreCAPTCHAのdiv要素を取るときに、同じコードがすべてのブラウザで完璧にうまく機能

すなわち、バージョン1.0作品モーダルでOK

出典

2015-02-23 11:50:38

問題は、ブートストラップのモーダルコンポーネントによって生成されます。

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されるだろう。 :)

出典

2015-03-10 13:55:33 Digibusiness

を明らかにこのenforceFocus方法はまた、アクセシビリティ目的https://github.com/twbs/bootstrap/issues/4781この機能のために "のみ" でありますIEのためにconditionnalyを無効にすることができます：if（/MSIE|Trident/.test(window.navigator.userAgent）） – fadomire

ここで私は角度を使ってこのコードを入れますか？ –

「次へ」および/または「確認」ボタンはまだ機能していません。デバッガのブレークポイントにヒットしますが、視覚的には何も変わりません。 –

「Digibusiness」の回答をフォローアップするには、ブートストラップ機能全体を実用的なもの（ページロード時にはdocument.ready機能が良い場所にする）。このようにして、モーダルに読み込まれたiframeにのみオーバーライドする+ IEを参照することができます。これにより、特定のiframe-over-modal-onのサイト全体でアクセシビリティ（これらは最近大きな問題になっています） -a特定のブラウザ機能の修正。

コードが行くには、次のとおりです。

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)) 
    } 
}

出典

2016-11-23 11:00:08 NaorS

モーダルまたはダイアログ内の新しいGoogle reCAPTCHAのIEでの問題

答えて

関連する問題