Menu
I have a custom form with several text fields. All of these elements have a tabindex value set. But once I placed the new recaptcha am not able to access the checkbox as it has tabindex set to default 0. Is there any way to set tab index for the new captcha checkbox ?
The following code demonstrates the issue:
<script src="https://www.google.com/recaptcha/api.js"></script>
<form action="" method="POST">
<input type="text" name="username" tabindex="1" autofocus>
<input type="password" name="password" tabindex="2">
<div class="g-recaptcha" data-sitekey="[SITE KEY]"></div>
<input type="submit" value="Login" tabindex="4">
</form>
Note the <script> is from the <head>.
When tabbing through the form, the order is as follows:
The desired order is as follows:
542
I spent a fair amount of time debugging the reCAPTCHA 2 API yesterday looking for undocumented features, and I'm reasonably certain Google does not provide an API to do this.
However, all you need to do is set the tabindex attribute on the iframe elements that gets generated. Google sets it to 0 by default, but there is no reason we can't change it. The iframe does not get generated immediately, so you will need to wait for it to render first.
Also, it would be nice if we could specify the tabindex we want on the .g-recaptcha element, in an attribute like data-tabindex.
Here is a nice little snippet that does just that, looping over the .g-recaptcha, adding an event listener for the iframe for the load event (using the capture phase since the event will not bubble), and setting the tabIndex property of the iframe to the value of the data-attribute attribute. Just include this script in the footer of you webpage, or run it on document ready.
//Loop over the .g-recaptcha wrapper elements.
Array.prototype.forEach.call(document.getElementsByClassName('g-recaptcha'), function(element) {
//Add a load event listener to each wrapper, using capture.
element.addEventListener('load', function(e) {
//Get the data-tabindex attribute value from the wrapper.
var tabindex = e.currentTarget.getAttribute('data-tabindex');
//Check if the attribute is set.
if (tabindex) {
//Set the tabIndex on the iframe.
e.target.tabIndex = tabindex;
}
}, true);
});
And in your HTML, include the data-tabindex value you want.
<div class="g-recaptcha" data-sitekey="[SITE KEY]" data-tabindex="3">
In new version of recaptcha you can use data-tabindex. https://developers.google.com/recaptcha/docs/display#render_param something like this:
<div class="g-recaptcha" data-sitekey="[SITE KEY]" data-tabindex="[Custom tabindex]"></div>
or this one:
<form action="" method="POST">
<input type="text" name="username" tabindex="1" autofocus>
<input type="password" name="password" tabindex="2">
<div class="g-recaptcha"></div>
<input type="submit" value="Login" tabindex="4">
</form>
<script src="https://www.google.com/recaptcha/api.js"></script>
<script>
var onloadCallback = function() {
grecaptcha.render(document.querySelector(".g-recaptcha"), {
'sitekey' : 'your site key',
'tabindex' : 'custom tabindex',
});
};
</script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
