Probleme mit neuen Google-reCAPTCHA in IE, wenn es im dialog modal oder

reCAPTCHA funktioniert sehr gut, in Chrom.

Allerdings (nur wenn reCAPTCHA iframe in einem Dialogfeld oder eine modale) im IE-der Platzhalter wird nicht Weggehen.

Was der Benutzer schreibt, ist als Teil des Platzhalters (glaube ich) und die "prüfen" Taste nicht aktiviert werden, angeklickt werden.

Bild erklärt dieser:

Der gleiche code funktioniert perfekt in allen Browsern, wenn ich das recaptcha div außerhalb des 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>

InformationsquelleAutor Mutaz Ghuni | 2015-01-11

17

Das problem wird erzeugt, indem die modale Komponente von Bootstrap.

Wenn das modal angezeigt wird diese Funktion aufgerufen wird:
```
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))
}
```
Die Funktion fügt einen "focusin" Ereignis in das Dokument, um sicher zu sein, dass der Fokus noch innerhalb des modal; wenn der Fokus geht auf ein anderes element außerhalb des modal letztere sofort erhalten Sie es zurück.

Daher, wenn Sie klicken Sie in das recaptcha-Formular den Fokus " Konflikt bewirkt, dass der Internet Explorer bug.

Jedenfalls eine mögliche Lösung ist, diese Methode zu überschreiben, und deaktivieren Sie das Fokus-Verhalten zurück, wenn ein recaptcha-Komponente erhalten der Schwerpunkt, aber das ist ziemlich schwierig zu tun, weil es keine Kontrolle über die recaptcha html (wie können Sie wissen, ob e.target ist ein element von recaptcha?).

Meine Lösung, um vollständig zu deaktivieren Sie dieses Verhalten, um dies zu tun, nur das überschreiben der enforceFocus Funktion mit einer leeren Funktion:
```
$.fn.modal.Constructor.prototype.enforceFocus = function () { };
```
Eine elegantere Lösung wäre apreciated. 🙂
- anscheinend ist diese enforceFocus Methode ist "nur" für accessibility-Zwecke github.com/twbs/bootstrap/issues/4781 auch diese Funktion kann deaktiviert werden, conditionnaly für IE : if (/MSIE|Trident/.test ("Fenster".navigator.userAgent))
- Wo setze ich diesen code mit eckigen?
- Die 'next' und/oder 'überprüfen' - button noch nicht funktioniert. Es trifft den breakpoint im debugger, sondern auch optisch, ändert sich nichts.
- Ich habe getan, einige weitere Untersuchung und der code ist immer noch ruft die bootstrap-Funktion und nicht den neuen überschreiben-Funktion.
InformationsquelleAutor Digibusiness
0

Alten recaptcha, d.h. version 1.0 funktioniert ok auf den modal

InformationsquelleAutor Manel Clos

Follow-up auf die Antwort von 'Digibusiness', Ein wenig eleganter wäre das überschreiben der gesamten bootstrap-Funktion und ist mit einem praktischen ein (auf der Seite Last - Dokument.ready-Funktion wäre ein guter Platz).
Auf diese Weise können Sie beziehen sich nur auf den IE, wenn overrding + nur iframes geladen auf den modal, daher auch nicht Schrauben Zugänglichkeit(die sich eine große Sache in diesen Tagen) alle über die Website nur für eine bestimmte iframe-over-modal-auf-eine-bestimmte-browser-Funktionalität beheben.

Wechselt der code folgt:

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

InformationsquelleAutor NaorS

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.