Probleme mit neuen Google reCAPTCHA in IE, wenn innerhalb Modal oder Dialog

reCAPTCHA funktioniert perfekt in Chrome.Probleme mit neuen Google reCAPTCHA in IE, wenn innerhalb Modal oder Dialog

jedoch (nur bei reCAPTCHA iframe in einem Dialogfeld oder einem modalen) in IE wird der Platzhalter nicht weggeht.

Was auch immer der Benutzer schreibt, ist Teil des Platzhalter betrachtet (glaube ich) und der „überprüfen“ -Taste wird nicht aktiviert angeklickt werden.

Das Bild erklärt dies:

Der gleiche Code sehr gut in allen Browsern funktioniert, wenn ich die recaptcha div außerhalb des modal nehmen

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

Quelle

2015-01-11 Mutaz Ghuni

Old recaptcha, dh Version 1.0 funktioniert ok auf dem modalen

Quelle

2015-02-23 11:50:38

Das Problem wird durch die modale Komponente von Bootstrap generiert.

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 eines „focusin“ Ereignis in das Dokument fügt sicher sein, dass der Fokus nach wie vor innerhalb des modal ist;:

Wenn die modal ist über diese Funktion angezeigt wird aufgerufen Wenn der Fokus auf ein anderes Element außerhalb des Modals gerichtet ist, dann erhält das letztere es sofort zurück.
Daher, wenn Sie in die Recaptcha-Form klicken, verursacht der Fokus Konflikt den Internet Explorer-Fehler.

, jedenfalls eine mögliche Lösung ist diese Methode außer Kraft zu setzen und das Fokus-back Verhalten zu deaktivieren, wenn eine recaptcha Komponente den Fokus erhalten, aber das ist ziemlich schwierig zu tun, weil es keine Kontrolle über die recaptcha html ist (wie kann man wissen, wenn e.target ein Element von recaptcha ist?).

Meine Lösung ist vollständig dieses Verhalten zu deaktivieren, zu tun, außer Kraft setzt dies nur die enforceFocus Funktion mit einer leeren Funktion:

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

Eine elegantere Lösung apreciated würde. :)

Quelle

2015-03-10 13:55:33 Digibusiness

offenbar diese enforceFocus Methode ist "nur" für einen bestimmten Zweck Zugänglichkeit https://github.com/twbs/bootstrap/issues/4781 auch diese Funktion könnte für den IE deaktiviert werden: if (/MSIE|Trident/.test(window.navigator.userAgent)) – fadomire

Wo gebe ich diesen Code mit eckigen? –

Die Schaltflächen "Weiter" und/oder "Verifizieren" funktionieren immer noch nicht. Es trifft den Breakpoint im Debugger, aber visuell ändert sich nichts. –

Um die Antwort von 'Digibusiness' zu verfolgen, wäre ein wenig eleganter, die gesamte Bootstrap-Funktion mit einer praktischen zu überschreiben (auf Ihrer Seite laden - die document.ready-Funktion wäre ein guter Ort) . Auf diese Weise können Sie sich nur auf IE beziehen, wenn Sie + nur auf Iframes überladen, die auf dem Modal geladen sind, und daher die Barrierefreiheit (die heutzutage eine große Sache geworden ist) über die gesamte Site nur für ein bestimmtes iframe-over-modal-on -a-spezifische-browser-funktionalität beheben.

Der Code geht folgendermaßen vor:

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

Quelle

2016-11-23 11:00:08 NaorS

Probleme mit neuen Google reCAPTCHA in IE, wenn innerhalb Modal oder Dialog

Antwort

Verwandte Themen