驗證碼在最右邊的底部cornver渲染出於某種原因與驗證碼

我的AJAX形式，簡化代碼：驗證碼在最右邊的底部cornver渲染出於某種原因與驗證碼

<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在右下角，頁腳下。爲什麼是這樣以及如何解決它？

來源

2017-03-19 Kuqa

驗證碼塊可能在'position：absolute'。嘗試使用css將'form'更新爲'position：relative'。 - 'form {position：relative;}' –

@ajaiJothi不工作 – Kuqa

由於您使用的「看不見」的驗證碼，就可以在HTML元素傳遞data-badge屬性的reCAPTCHA API。 data-badge可以取三個值 - bottomright,bottomleft and inline。如果跳過此屬性，則默認爲bottomright，這就是它顯示在右下角的原因。如果您想要以內嵌形式顯示圖標，請使用「內嵌」值。的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總是聯呈現。只需刪除data-size="invisible"屬性即可。

來源

2017-03-21 05:05:47 codneto

data-badge =「inline」 - working，tnx。然而，驗證碼出現後，我已經解決了它，沒有成功 - 簽名 - 綠色動畫。你知道如何解決這個問題嗎？ – Kuqa

這是不可見和可見驗證碼之間的另一個區別。將沒有成功完成挑戰的視覺信息，但您的代碼將通過回調知道用戶已被驗證，此時您可以通過編程方式重新提交表單數據。我認爲你必須在「本地主機」上進行測試。我注意到的一件事是在本地主機上，用戶必須每次都完成挑戰，而在現場，每次都不會顯示出每次與可視驗證碼相關的驗證碼挑戰，因此沒有可視的「動畫」或信號。 – codneto

還有其他問題，我會在其他問題上詢問他們。 – Kuqa

要隱藏谷歌無形的reCAPTCHA徽章做到以下幾點：

在HTML用途：

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

在你的CSS使用：

.grecaptcha-badge{ 
    display: none; 
}

完成:)

來源

2017-03-22 14:34:15

嗨Abner，謝謝你分享這個。您的網站是否因隱藏徽章而受到懲罰？上面的代碼工作，我想隱藏徽章，但我不能找到任何文件是否隱藏徽章是可以這樣做或不。 – Nicola

@Nicola的新答案？ – funerr

找到了答案，這是**不允許！「這些條款不會授予您使用我們服務中使用的任何品牌或徽標的權利。請勿刪除，遮掩或更改我們服務中顯示的任何法律聲明。「 - 來自：https://stackoverflow.com/questions/44543157/how-to-hide-the-google-invisible-recaptcha-badge – funerr

驗證碼在最右邊的底部cornver渲染出於某種原因與驗證碼

回答

相關問題