javascript - 由于某种原因，reCaptcha 呈现在最右下角

Question

我的带有 recaptcha 的 ajax 表单，简化的代码:

<form>
  <input type="email" placeholder="Email" required="true" />
  <input type="submit" value="Create account" />
  <div class="g-recaptcha" data-sitekey="12345" data-size="invisible"></div>
</form>

出于某种原因，它将 reCaptcha 呈现在右下角的某个位置，在页脚下方。为什么会这样以及如何解决？

Answer 1

由于您使用的是“不可见的”recaptcha，您可以将 HTML 元素中的 data-badge 属性传递给 recaptcha api。 data-badge 可以采用三个值 - bottomright、bottomleft 和 inline。如果跳过此属性，则 bottomright 是默认值，这就是它在右下角呈现的原因。如果要在表单中显示内联图标，请使用“inline”值。 data-badge="inline" 的另一个好处是您可以使用普通 CSS 来改变它的外观等。

因此，将您的 recaptcha 目标元素的 HTML 更改为:

<div class="g-recaptcha" data-sitekey="12345" data-size="invisible" data-badge="inline"></div>

或者，如果您使用 grecaptcha.render() api 来呈现 recaptcha，那么您也可以使用将参数中的 badge 值传递给此 api。

您可能已经知道这一点，但我提到它以供引用，您的另一个选择是使用“可见”recaptcha 而不是“不可见”，因为可见 recaptcha 始终以内联方式呈现。只需删除 data-size="invisible" 属性即可。