Why reCaptcha Stealing Focus on page load

Question

Recaptcha suddenly started stealing focus when it loads on the page, which causes the page to scroll to the form (very annoying). Does this seem to be a new mistake?

See an example: http://www.gullixson.com/Contact-Us

Apparently, the main Google library that downloads reCaptcha http://www.google.com/recaptcha/api/challenge?k=UNIQUEAPIKEY&lang=en calls http://www.google.com/recaptcha/api/js/recaptcha_canary .js

In this case, the init () function runs the reload () function, which calls the load of the Recaptcha.focus_response_field () function.

It seems we can do nothing until they fix it?

Does anyone know how to report this error to Google? Or a way around this?

Answer 1

The easiest way is to simply override Recaptcha.focus_response_fieldafter loading recaptcha JS.

// Load recaptcha JS

// ...

Recaptcha.focus_response_field = function(){return false;};

This makes the focus operation essentially turned into non-op.

Edit: tested and works in Chrome, Firefox, and IE9

Answer 2

I solved this problem with a little jQuery patch code:

$(document).ready(function() {
    $(window).focus(function(){
        /* If on load is detected a div to show reCaptcha code 
           ('div#captcha') simply force the focus to the top of the page. 
         */
       if( $('body').has('div#captcha') ){
         $('html,body').animate({scrollTop:0}, 1000, 'swing');
       }
    });
});

Answer 3

jQuery:

<style>
#recaptcha_widget_div{
display: none;
}
</style>

...existing recaptcha code here...

<script>
$("body").on("focus", "input, textarea", function() {
    $("#recaptcha_widget_div").show();
});
</script>

Answer 4

.

, , Google .

, jQuery.

Answer 5

Recaptcha.focus_response_field:

Recaptcha.create("your_public_key", element, {
   theme: "red",
   callback: Recaptcha.focus_response_field // <-- Comment this line
});