Why is reCaptcha Stealing Focus on Page Load

Question

Recaptcha has suddenly started stealing the focus when it's loaded on a page, which causes the page to scroll down to the form (very annoying). This appears to be a new bug?

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

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

In there, the init() function appears to fire a reload() function, which is causing the Recaptcha.focus_response_field() function to load.

There appears to be nothing we can do... until they fix it?

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

Answer 1

The easiest workaround is just to redefine Recaptcha.focus_response_field after the recaptcha JS has loaded.

// Load recaptcha JS

// ...

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

This makes the focus operation essentially turn into a non-op.

Edit: Tested and working on Chrome, Firefox and IE9

Answer 2

I solved this problem with a little jQuery fix 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

Quick workaround using 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

I had the same problem yesterday.

Today, I checked again and it seems Google has fixed the problem.

You don't need to apply any hacks using jQuery anymore.

Answer 5

Try to comment the Recaptcha.focus_response_field:

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