Problemi con la nuova reCAPTCHA di Google in IE quando si è in modal o nella finestra di dialogo

reCAPTCHA funziona perfettamente in Chrome.Problemi con la nuova reCAPTCHA di Google in IE quando si è in modal o nella finestra di dialogo

Tuttavia, (solo quando l'iframe reCAPTCHA si trova all'interno di una finestra di dialogo o di una modale) in IE il segnaposto non andrà via.

Qualsiasi cosa l'utente scriva è considerato parte del segnaposto (credo) e il pulsante "verifica" non sarà abilitato per essere cliccato.

L'immagine spiega:

Lo stesso codice funziona perfettamente in tutti i browser quando prendo il div recaptcha al di fuori del modale

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

fonte

2015-01-11 Mutaz Ghuni

Vecchio recaptcha, vale a dire la versione 1.0 opere ok sul modale

fonte

2015-02-23 11:50:38

Il problema è generato dal componente modale di Bootstrap.

Quando il modale sta per apparire questa funzione si chiama:

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

La funzione aggiunge un evento "focusIn" al documento per essere sicuri che l'attenzione è ancora all'interno della modale; se l'attenzione si sposta su un altro elemento al di fuori del modale, quest'ultimo lo recupera immediatamente.
Pertanto, quando si fa clic all'interno del modulo di riconciliazione il conflitto 'focus provoca il bug di Internet Explorer.

In ogni caso, una possibile soluzione è quella di sovrascrivere quel metodo e disabilitare il comportamento di focusback quando un componente recaptcha ottiene lo stato attivo, ma questo è piuttosto difficile da fare perché non c'è controllo sul recaptcha html (come si può sapere se e.target è un elemento di recaptcha?).

La mia soluzione è quella di disabilitare completamente questo comportamento, per fare questo basta ignorare la funzione enforceFocus con una funzione di vuoto:

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

Una soluzione più elegante sarebbe apprezzata. :)

fonte

2015-03-10 13:55:33 Digibusiness

a quanto pare questo metodo enforceFocus è "solo" a scopo di accessibilità https://github.com/twbs/bootstrap/issues/4781 anche questa funzione potrebbe essere disabilitato conditionnaly per IE: if (/MSIE|Trident/.test(window.navigator.userAgent)) – fadomire

Dove inserisco questo codice usando angolare? –

Il pulsante 'next' e/o 'verify' non funziona ancora. Colpisce il breakpoint nel debugger ma visivamente, nulla cambia. –

Per dare seguito alla risposta di "Digibusiness", un po 'più elegante sarebbe sostituire l'intera funzione di bootstrap con una pratica (sul carico della pagina - la funzione document.ready sarebbe un buon posto) . In questo modo, puoi riferirti solo a IE quando overrider + solo agli iframe caricati sul modale, quindi non avvitare l'accessibilità (che sono diventati un grosso problema in questi giorni) in tutto il sito solo per uno specifico iframe-over-modal-on -a-specifica-browser-fix di browser.

Il codice va segue:

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

fonte

2016-11-23 11:00:08 NaorS

Problemi con la nuova reCAPTCHA di Google in IE quando si è in modal o nella finestra di dialogo

risposta

Problemi correlati