Question

该网站是用wordpress构建的，由于我正在使用的列表的复杂性（Aweber服务），我必须使用已集成的插件，以便我的订阅者可以转到我使用的列表服务。

话虽这么说，我不得不经常破解这个插件，以便由于支持不佳而做任何事情，并且没有其他插件可以接近这个。

我设法在我的提交按钮下面实施谷歌的recaptcha。

    <p class="fca_eoi_postbox_0_submit_button_wrapper">{{{submit_button}}}</p>
    <div class="g-recaptcha" data-sitekey="mysitekey"></div>

它出现了，我已经为它做了适当的CSS，桃子。

现在我需要它才能在提交后才能使用它。巨大的问题，创建按钮的位置的代码被埋没了，我无法花费无数个小时来测试试图找出它的创建位置。所以这个想法很划清楚。但这里是我可以通过检查元素得到的按钮html代码：

提交按钮：

<input class="fca_eoi_form_button_element" type="submit" value="Stay Informed">

另外，我发现这篇文章：reCAPTCHA - to appear after press submit

我一直在尝试实施它：

JS

(function ($) {
$(".fca_eoi_form_input_element").focus(function() {
$(".fca_eoi_form_input_element div[id*='g-recaptcha']").css("display:","inline-block");
});}

我不能只使用$，因为有些东西会覆盖它。我对Javascript并不熟悉，所以我可以假设这里有错误。

我的recaptcha的CSS：

.g-recaptcha {
margin:0 auto;
display:none;
}

我做错了什么？

指向网站http://juniorgoldreport.com/的链接 - 我正在处理的表单已停在顶部屏幕上。

Answer 1

你有安装jQuery吗？这会阻止$工作 - 如果你这样做但它仍然不起作用，使用jQuery而不是像这样的$：

jQuery(".fca_eoi_form_input_element").focus(function() {
jQuery(".g-recaptcha").css("display:","inline-block");

如果您不使用jQuery，则需要使用纯JavaScript。

var myInput =  document.querySelector(".fca_eoi_form_input_element");
var myCaptcha = document.querySelector(".g-recaptcha");
myInput.onfocus = function() {
  myCaptcha.style.display = "inline-block";
}

希望其中一个有帮助！

Answer 2

快速查看您的页面，我可以看到jQuery可用。

这样的事情可以起作用：

(function($) {
    $(document).ready(function () {
        $(".fca_eoi_form_input_element").on("focus mouseover", function () {
            $(".g-recaptcha").fadeIn();
        });
    });
})(jQuery);

虽然我不确定你为什么要使用焦点事件。您可以在此处使用多个事件，以防您决定修改其行为。

谷歌的重新收回仅在提交按钮后显示 - 黑客表单插件

2 个答案: