Javascript 如何隐藏 Google Invisible reCAPTCHA 徽章

How to hide the Google Invisible reCAPTCHA badge

提问by James Law

When implementing the new Google Invisible reCATPTCHA, by default you get a little "protected by reCAPTCHA" badge in the bottom right of the screen that pops out when you roll over it.

在实施新的 Google Invisible reCATPTCHA 时，默认情况下，您会在屏幕右下角看到一个“受 reCAPTCHA 保护”徽章，当您滚动它时会弹出该徽章。

I'd like to hide this.

我想隐藏这个。

采纳答案by James Law

Set the data-badgeattribute to inline

将data-badge属性设置为inline

<button type="submit" data-sitekey="your_site_key" data-callback="onSubmit" data-badge="inline" />

And add the following CSS

并添加以下 CSS

.grecaptcha-badge {
    display: none;
}

回答by Yann39

Of course you can do it using CSS.

当然，您可以使用 CSS 来实现。

But according to the reCAPTCHA Terms of service (that you must have agreed), you must inform visitors about the reCAPTCHA implementation on your site :

但根据 reCAPTCHA 服务条款（您必须已同意），您必须告知访问者您网站上的 reCAPTCHA 实施情况：

And from the Google Terms of Service

来自Google 服务条款

we retain any intellectual property rights that we have in our content. Don't remove, obscure, or alter any of our branding, logos, or legal notices.

我们保留我们在内容中拥有的任何知识产权。请勿删除、掩盖或更改我们的任何品牌、徽标或法律声明。

UPDATE DEC 2018(thanks @Sol)

2018 年 12 月更新（感谢 @Sol）

Google now allows to hide the Badge, from the FAQ:

Google 现在允许从常见问题中隐藏徽章：

I'd like to hide the reCAPTCHA v3 badge. What is allowed?

You are allowed to hide the badge as long as you include the reCAPTCHA
branding visibly in the user flow. Please include the following text:

This site is protected by reCAPTCHA and the Google
    <a href="https://policies.google.com/privacy">Privacy Policy</a> and
    <a href="https://policies.google.com/terms">Terms of Service</a> apply.

For example:

我想隐藏 reCAPTCHA v3 徽章。什么是允许的？

You are allowed to hide the badge as long as you include the reCAPTCHA
branding visibly in the user flow. Please include the following text:

This site is protected by reCAPTCHA and the Google
    <a href="https://policies.google.com/privacy">Privacy Policy</a> and
    <a href="https://policies.google.com/terms">Terms of Service</a> apply.

例如：

So you can simply hide it using the following CSS :

所以你可以简单地使用以下 CSS 隐藏它：

.grecaptcha-badge { 
    visibility: hidden;
}

Do not use display: none;as it appears to disable the spam checking (thanks @Zade)

不要使用，display: none;因为它似乎禁用了垃圾邮件检查（感谢 @Zade）

回答by Helenesh

I have tested all approaches and:

我已经测试了所有方法并且：

WARNING:display: noneDISABLES the spam checking!

警告：display: none禁用垃圾邮件检查！

visibility: hiddenand opacity: 0do NOT disable the spam checking.

visibility: hidden并且opacity: 0不要禁用垃圾邮件检查。

Code to use:

使用代码：

.grecaptcha-badge { 
    visibility: hidden;
}

When you hide the badge icon, Google wants you to referencetheir service on your form by adding this:

当您隐藏徽章图标时，Google 希望您通过添加以下内容在您的表单上引用他们的服务：

<small>This site is protected by reCAPTCHA and the Google 
    <a href="https://policies.google.com/privacy">Privacy Policy</a> and
    <a href="https://policies.google.com/terms">Terms of Service</a> apply.
</small>

回答by codesmith

Google now says "You are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow." Link

谷歌现在说“只要你在用户流中明显地包含 reCAPTCHA 品牌，你就可以隐藏徽章。” 关联

回答by krukid

Since hiding the badge is not really legit as per the TOU, and existing placement options were breaking my UI and/or UX, I've come up with the following customization that mimics fixed positioning, but is instead rendered inline:

由于根据 TOU 隐藏徽章并不真正合法，并且现有的放置选项破坏了我的 UI 和/或 UX，我提出了以下模仿固定定位的自定义，而是内联呈现：

You just need to apply some CSS on your badge container:

你只需要在你的徽章容器上应用一些 CSS：

.badge-container {
  display: flex;
  justify-content: flex-end;
  overflow: hidden;
  width: 70px;
  height: 60px;
  margin: 0 auto;
  box-shadow: 0 0 4px #ddd;
  transition: linear 100ms width;
}
.badge-container:hover {
    width: 256px;
}

I think that's as far as you can legally push it.

我认为这是您可以合法推动的范围。

回答by Leon

I decided to hide the badge on all pages except my contact page (using Wordpress):

我决定在除联系页面之外的所有页面上隐藏徽章（使用 Wordpress）：

/* Hides the reCAPTCHA on every page */
.grecaptcha-badge {
    visibility: hidden !important;
}

/* Shows the reCAPTCHA on the Contact page */
/* Obviously change the page number to your own */
.page-id-17 .grecaptcha-badge {
    visibility: visible !important;
}

I'm not a web developer so please correct me if there's something wrong.

我不是网络开发人员，所以如果有什么问题，请纠正我。

EDIT: Updated to use visibility instead of display.

编辑：更新为使用可见性而不是显示。

回答by Nigel Dyer

A slight variant of Matthew Dowell's post which avoids the short flash, but displays whenever the contact form 7 form is visible:

Matthew Dowell 帖子的一个轻微变体，它避免了短暂的闪光，但只要联系表格 7 表格可见就会显示：

div.grecaptcha-badge{
    width:0 !important;
}

div.grecaptcha-badge.show{
    width:256px !important; 
}

I then added the following to the header.php in my child theme:

然后我将以下内容添加到我的子主题中的 header.php 中：

<script>
jQuery( window ).load(function () { 
    if( jQuery( '.wpcf7' ).length ){ 
        jQuery( '.grecaptcha-badge' ).addClass( 'show' );
    }
});
</script>

回答by Matthew Dowell

For users of Contact Form 7 on Wordpress this method is working for me: I hide the v3 Recaptcha on all pages except those with Contact 7 Forms.

对于 Wordpress 上 Contact Form 7 的用户，此方法对我有用：我在所有页面上隐藏了 v3 Recaptcha，除了那些带有 Contact 7 Forms 的页面。

But this method should work on any site where you are using a unique class selector which can identify all pages with text input form elements.

但是此方法应该适用于您使用唯一类选择器的任何站点，该类选择器可以使用文本输入表单元素识别所有页面。

First, I added a target style rule in CSS which can collapse the tile:

首先，我在 CSS 中添加了一个可以折叠 tile 的目标样式规则：

CSS

CSS

 div.grecaptcha-badge.hide{
    width:0 !important;
}

Then I added JQuery script in my header to trigger after the window loads so the 'grecaptcha-badge' class selector is available to JQuery, and can add the 'hide' class to apply the available CSS style.

然后我在我的标题中添加了 JQuery 脚本以在窗口加载后触发，以便 JQuery 可以使用“grecaptcha-badge”类选择器，并且可以添加“隐藏”类以应用可用的 CSS 样式。

$(window).load(function () { 
    if(!($('.wpcf7').length)){ 
      $('.grecaptcha-badge').addClass( 'hide' );
       }
});

My tile still will flash on every page for a half a second, but it's the best workaround I've found so far that I hope will comply. Suggestions for improvement appreciated.

我的磁贴仍然会在每一页上闪烁半秒，但这是我迄今为止发现的最好的解决方法，我希望能遵守。改进建议表示赞赏。

回答by Andy P

My solution was to hide the badge, then display it when the user focuses on a form input - thus still adhering to Google's T&Cs.

我的解决方案是隐藏徽章，然后在用户关注表单输入时显示它 - 因此仍然遵守 Google 的 T&C。

Note:The reCAPTCHA I was tweaking had been generated by a WordPress plugin, so you may need to wrap the reCAPTCHA with a <div class="inv-recaptcha-holder"> ... </div>yourself.

注意：我正在调整的 reCAPTCHA 是由 WordPress 插件生成的，因此您可能需要自己将 reCAPTCHA 包装起来<div class="inv-recaptcha-holder"> ... </div>。

CSS

CSS

.inv-recaptcha-holder {
  visibility: hidden;
  opacity: 0;
  transition: linear opacity 1s;
}

.inv-recaptcha-holder.show {
  visibility: visible;
  opacity: 1;
  transition: linear opacity 1s;
}

jQuery

jQuery

$(document).ready(function () {
  $('form input, form textarea').on( 'focus', function() {
    $('.inv-recaptcha-holder').addClass( 'show' );
  });
});

Obviously you can change the jQuery selector to target specific forms if necessary.

显然，如有必要，您可以更改 jQuery 选择器以针对特定表单。

回答by Mqtthieu

this does not disable the spam checking

这不会禁用垃圾邮件检查

div.g-recaptcha > div.grecaptcha-badge {
    width:0 !important;
}