3

我正在我的网站上加载两个脚本：

<script src="scripts/my_site.js"></script>
<script src="https://www.google.com/recaptcha/api.js" async="" defer=""></script>

哪里my_site.js看起来像这样：

... many other functions, not nested

function captachaCallback() {
    console.log("Captcha");
}

... other functions

然后以我的形式使用：

<button id="btnSubmit" class="g-recaptcha" data-sitekey="my_key" data-callback="captachaCallback">Send</button>

每当我按下按钮时，就会出现一个白色的半透明覆盖空 div，但什么也没发生（控制台消息不出现）并且表单被卡住。

点击图片

我正在使用最新的 Chrome。

提前致谢

4

3 回答 3

2

问题是我的 CSS 设置会影响我网站上的所有 div。

div { overflow: hidden; }

显然，这使得带有验证码测试的弹出窗口不可见。

删除此设置解决了问题。

于 2020-05-12T11:01:00.263 回答
1

我怀疑该元素正在变得不可见。那么您可以尝试添加data-badge="inline"到 html 中的 recaptcha 元素吗

<button id="btnSubmit" class="g-recaptcha" data-sitekey="my_key" data-badge="inline" data-callback="captachaCallback">Send</button>

希望这可以帮助。

于 2020-05-11T18:04:43.763 回答
-1

你没有渲染验证码。

一旦用户通过向指定的函数发送回调来完成验证码，提交按钮将尝试验证验证码的响应data-callback。由于您尚未创建组件，因此它会陷入循环。

  1. 提交按钮不能与加载 CAPTCHA 的标签相同。您需要在空标签中呈现验证码。

代替：

    <button id="btnSubmit" class="g-recaptcha" data-sitekey="my_key" data-callback="captachaCallback">Send</button>

像这样渲染它：

    <div id="captcha_element" class="g-recaptcha" data-sitekey="my_key" data-callback="captachaCallback"></div>
  1. 把它包在一个表格里。你已经有了它，所以只需修改它。

由于您指定了验证码完成后要运行的功能，因此您无需担心提交按钮。

该结构应如下所示：

    <form action="?" method="POST">
      /// The other elements in your form
      /// ...
      <div id="captcha_element" class="g-recaptcha" data-sitekey="my-key" data-callback="captachaCallback"></div>
      <br/>
      <input id="btnSubmit" type="submit" value="Submit">
    </form>

还请务必查看文档；）

https://developers.google.com/recaptcha/docs/display

于 2020-05-06T08:42:50.687 回答