由于某种原因，reCaptcha在最右边的底部cornver中呈现

问题描述

我的ajax表格包含recaptcha，简化代码：

My ajax form with recaptcha, simplified code:

<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呈现在页脚右下角的某处。为什么这样以及如何解决？

For some reason, it renders the reCaptcha somewhere in the right bottom corner, under the footer. Why is that and how to fix it?

推荐答案

由于您使用的是隐形重新绑定，因此您可以将HTML元素中的 data-badge 属性传递给recaptcha api。 数据徽章可以采用三个值 - 底部， bottomleft 和内联。如果跳过此属性，则 bottomright 是默认值，这就是它在右下角呈现的原因。如果要在表单中以内嵌方式显示图标，请使用内联值。 data-badge =inline的另一个好处是你可以使用普通的CSS来改变它的外观等。

Since you are using "invisible" recaptcha, you can pass data-badge attribute in HTML element to recaptcha api. data-badge can take three values - bottomright, bottomleft and inline. bottomright is default if this attribute is skipped, and that is why it is rendering in bottom right corner. Use "inline" value if you want to show the icon inline in form. Another benefit of data-badge="inline" is that you can use normal CSS to change its look etc.

所以将recaptcha目标元素的HTML更改为：

So change your HTML of recaptcha target element to this:

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

或者，如果您使用 grecaptcha.render（） api渲染recaptcha，然后你也可以在这个api的参数中使用传递徽章值。

Alternatively, if you use grecaptcha.render() api to render recaptcha, then you can also use pass badge value in parameters to this api.

你可能已经知道了这一点，但我提到它是为了参考，你有另一种选择是使用可见recaptcha而不是隐形，因为可见的recaptcha总是以内联方式呈现。只需删除 data-size =invisible属性即可。

You may already know this, but am mentioning it for reference that another option you have is to use "visible" recaptcha instead of "invisible" because visible recaptcha is always rendered inline. Just remove data-size="invisible" attribute to do that.

这篇关于由于某种原因，reCaptcha在最右边的底部cornver中呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！