私は最近、Google の新しい Recaptcha の方法、つまり新しい Invisible Recaptcha を使い始めました。recaptcha 属性を送信ボタンに直接アタッチすると、Google の recaptcha API が呼び出され、検証プロセスが開始されるため、このバージョンの実装は少し異なることに気付きました。すべて正常に動作していますが、大きな問題の 1 つは、「Protected by recaptcha」バッジの配置にあります。
recaptcha 構成を送信ボタンに追加すると、画面の右側にバッジが表示され始めます。他のサイトによると、このバッジはホバーされるまでは正方形のレキャプチャ ロゴであり、その後スライドして、私のサイトで最初に表示される大きな長方形になるはずです。
これは、目に見えない recaptcha を実装した後、自分のサイトに表示される画像です。
recaptcha 属性を含む送信ボタンのコードは次のとおりです。
<button class="btn btn-primary btn-block g-recaptcha" data-sitekey="key"
data-callback="submitsecure" data-badge="bottomright" type="submit">Get Started</button>
注:やdata-badgeなどの他のオプションは、同じ配置の問題inlineをbottomleft引き起こします。
ボタンを含むフォームのコード:
<form action="processjoin.php" method="post" id="signupform" style="padding-top:10px;padding-bottom:10px;max-width:50%;">
<h2 class="sr-only">Login Form</h2>
<div></div>
<div class="illustration"><i class="icon ion-ios-pulse-strong"></i>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" name="name" placeholder="Your Name" class="form-control" id="name" />
</div>
<div class="form-group">
<input type="text" name="username" placeholder="Username" class="form-control" id="username" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="email" name="email" placeholder="Email" class="form-control" id="email" />
</div>
<div class="form-group">
<input type="password" name="password" placeholder="Password" class="form-control" id="password" />
</div>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary btn-block g-recaptcha" data-sitekey="6LfdMhkUAAAAAHl-LXZm_gPP1g-UX0aWt8sMR4uW" data-callback="submitsecure" data-badge="bottomright" type="submit">Get Started</button>
</div>
<a href="#" class="forgot">
<div></div>Already have an account? Sign in.</a>
</div>
</form>
この recaptcha バッジで 2 つの問題が発生しています。
- バッジは、バウンディング ボックス/境界線タイプのものの外側に不具合があります
- また、本来のように、ホバリングするまで部分的に画面外に配置されることもありません。マウスで何らかの方法で操作する前に、完全な長方形が表示されます。カーソルを合わせるまで正方形のロゴが表示されているはずですが、スライドして完全な長方形になります。
基本的に、これを適切に配置して、想定どおりに画面外からスライドインし、境界内に適切に収まるようにする方法を理解する必要があります。
Google Chrome 開発者ツールは、これらがウィンドウの読み込み時に生成されるバッジ div の現在の属性であることを教えてくれます。
あなたが提供できる助けに本当に感謝しています！バッジが必要であるという私の考えが間違っている場合は、修正してください。CSS で強制的に削除しますが、これによりキャプチャ検証プロセスが混乱し、Google のポリシーに違反する可能性があります。