Ano*_*p m 5 recaptcha tabindex
我有一个带有几个文本字段的自定义表单.所有这些元素都有一个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>.
在表格中进行选项卡时,顺序如下:
所需的顺序如下:
我昨天花了相当多的时间调试reCAPTCHA 2 API,寻找未记录的功能,而且我有理由相信Google没有提供API来执行此操作.
但是,您需要做的就是在生成tabindex的iframe元素上设置属性.谷歌0默认将其设置为,但我们没有理由不改变它.在iframe没有得到立即生成的,所以你需要等待它先渲染.
另外,如果我们可以在类似的属性中指定tabindex我们想要的.g-recaptcha元素,那将是很好的data-tabindex.
这是一个可爱的小片段,做到了这一点,循环比.g-recaptcha,添加事件侦听器iframe的load事件(使用捕获阶段,因为事件不会泡沫),以及设置tabIndex的属性iframe的价值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">
| 归档时间： |
|
| 查看次数： |
3012 次 |
| 最近记录： |