Question

我有一个包含多个文本字段的自定义表单。所有这些元素都设置了tabindex值。但是一旦我放置了新的recaptcha，我就无法访问该复选框，因为它将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>。

在表单中进行制表时，顺序如下：

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

所需的顺序如下：

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

Answer 1

我昨天花了相当多的时间调试reCAPTCHA 2 API，寻找未记录的功能，而且我确定谷歌没有提供API来执行此操作。

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

此外，如果我们可以在tabindex元素中指定.g-recaptcha我们想要的data-tabindex，那将会很好。

这是一个很好的小片段，它循环遍历.g-recaptcha，为iframe事件load添加一个事件监听器（使用事件后的捕获阶段）不会冒泡），并将tabIndex的{{1}}属性设置为iframe属性的值。只需在您网页的页脚中包含此脚本，或在文档准备就绪时运行它。

data-attribute

在您的HTML中，添加您想要的//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); });值。

data-tabindex

Answer 2

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>

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

2 个答案: