Google的Recaptcha只在“提交”按鈕之后出現-黑客入侵了一個表單插件

Question

該網站是用wordpress構建的，由於我正在使用的列表的復雜性（Aweber服務），我必須使用已經集成了該插件的插件，以便我的訂戶可以轉到我使用的列表服務。

話雖這么說，由於支持不佳，我必須不斷破解該插件才能執行任何操作，並且沒有其他插件可以像現在這樣接近。

我設法在我的“提交”按鈕下方實現了Google的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-在提交后出現

我一直在嘗試實現它：

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);

盡管我不確定您為什么使用焦點事件。 您可以使用多個事件，就像我在這里所做的那樣，以防您決定修改其行為。