有没有办法在recaptcha 2中设置tabindex？答案

【问题标题】：Is there any ways to set tabindex in recaptcha 2?有没有办法在recaptcha 2中设置tabindex？
【发布时间】：2015-01-12 10:57:20
【问题描述】：

我有一个包含多个文本字段的自定义表单。所有这些元素都有一个tabindex 值集。但是，一旦我放置了新的验证码，就无法访问该复选框，因为它的 tabindex 设置为默认 0。有没有办法为新的验证码复选框设置选项卡索引？

以下代码演示了该问题：

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

注意<script> 来自<head>。

在表单中跳转时，顺序如下：

用户名
密码
提交按钮
验证码

想要的顺序如下：

用户名
密码
验证码
提交按钮

【问题讨论】：

我在将tabindex 设置为reCAPTCHA 2 的输入元素中切换没有任何问题。OP 或@Mooseman 可以创建MCVE吗？
@AlexanderO'Mara 如果不使用站点密钥，就无法嵌入验证码。不过我会在没有密钥的情况下发布代码。
@AlexanderO'Mara 已发布。谢谢。
setTimeout(function() { $('.g-recaptcha iframe').attr('tabindex', '2') }, 200)
很高兴我阅读了 cmets @user345426 有一个可行的解决方案，只需在加载时调用 $('.g-recaptcha iframe').attr('tabindex', '6')

标签： recaptcha tabindex

【解决方案1】：

我昨天花了相当多的时间调试 reCAPTCHA 2 API 以寻找未记录的功能，并且我有理由确定 Google 没有提供用于执行此操作的 API。

但是，您需要做的就是在生成的iframe 元素上设置tabindex 属性。 Google 默认将其设置为0，但我们没有理由不能更改它。 iframe 不会立即生成，因此您需要等待它先渲染。

另外，如果我们可以在.g-recaptcha 元素上指定我们想要的tabindex，在data-tabindex 之类的属性中，那就太好了。

这是一个不错的小 sn-p，它可以做到这一点，循环 .g-recaptcha，为 iframe 添加一个事件侦听器，用于 load 事件（使用捕获阶段，因为事件不会冒泡），并将iframe 的tabIndex 属性设置为data-attribute 属性的值。只需将此脚本包含在您网页的页脚中，或在准备好文档时运行它。

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

在您的 HTML 中，包含您想要的 data-tabindex 值。

<div class="g-recaptcha" data-sitekey="[SITE KEY]" data-tabindex="3">

【讨论】：

密码字段和验证码复选框之间的选项卡仍然存在。这可以避免吗？
@Mooseman 什么浏览器？一些浏览器似乎会选择 iframe 本身，然后是内容。我认为这是无法避免的。
Chrome 40。超链接也会被标记，但我认为这是可以避免的，因为在 iframe 中。
@Mooseman 是的，屏幕外有一些 <div id="recaptcha-accessible-status" class="rc-anchor-aria-status" aria-live="assertive" tabindex="0"> 元素。不确定它是什么。我想不出有什么可做的，但要跳过链接，您可以使用带有全局函数名称的data-callback，它将焦点设置到成功表单中的下一个元素。
能够使用data-callback，但仍希望避免密码输入和复选框之间的额外标签。可以接受一个 hacky 解决方案。

【解决方案2】：

在新版本的recaptcha 中，您可以使用data-tabindex。 https://developers.google.com/recaptcha/docs/display#render_param 像这样：

<div class="g-recaptcha" data-sitekey="[SITE KEY]" data-tabindex="[Custom tabindex]"></div>

或者这个：

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

【讨论】：

你测试过这个解决方案吗？我显然根本没有通过 reCAPTCHA 进行标签...它只是在我结束时跳过它。也可能是它不适用于我的特定浏览器（SeaMonkey）...