Google ReCaptcha iosデバイスで検証された場合、ページの一番下までスクロール

Question

私はお問い合わせフォームでgoogle recaptchaを使用しています。問題は、モバイルデバイスでは、Googleのrecaptchaが検証されるときにページの一番下まで使用をスクロールするということです。その場合は、特定のフォームを送信するために再度上にスクロールする必要があります。

これは、バージョン10以降を実行しているiOSデバイスでのみ発生します。

私はこれを解決できませんでした。

あなたは私が管理し、ここで問題https://www.digamberpradhan.com.np/contact-copy/

Answer 1

を見ることができますが、この問題の回避策を見つけました。 まず、応答が送信された後にコールバックがあることを知っておく必要があります。私がやったことは、このコールバックで必要なものに焦点を当てることでした。しかし、フォーカスはiOS上で正しく動作しないので、javascriptのアニメーションである別の回避策を使用する必要があります。あなたがreCAPTCHAのがロードされた後、私はonloadCallback呼んでいる見ることができるように

<script src="http://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script> 
<div id="re-captcha" class="g-recaptcha" ></div> 

：
ドキュメンテーション：私の場合はhttps://developers.google.com/recaptcha/docs/display

、それはこのようになります。また、何らかの理由でrender = explicitを指定しなければ、コールバックは起こりません。

<script> 
    var focusWhatever = function (response) { 
     $("html, body").animate({ scrollTop: $("#whatever").offset().top }, "slow"); 
    }; 

    var onloadCallback = function() { 
     var widget = grecaptcha.render(document.getElementById("re-captcha"), { 
      'sitekey' : "yoursitekey", 
      'theme': "light", 
      'callback' : focusWhatever 
     }); 
    } 
</script> 

特に、この場合、アニメーションは必要な要素に直接移動します。ユーザーにとってはうまく見えるので、実際にフォーカスを当てたい要素の上にある要素を選択する必要があります。

Answer 2

これは私がこの問題が私が管理しているWordPressのウェブサイトの1つで起きているのを発見したので、私が使用した回避策でした。これは、onloadコールバックを使用するように見える点で、Rodrigo'sに似ています。 。しかし、代わりに（）オフセット$（要素）にスクロールのトップ、私の代わりにスクロールイベントを見て：reCAPTCHAのコンテナがビューにスクロールした後は、私は窓のpageYOffsetのノートを代わりに取って、その代わりに

<script type="text/javascript"> 
window.reCaptchaPos = false; 

function attachEvent(element, event, callbackFunction) { 
    if (element.addEventListener) { 
     element.addEventListener(event, callbackFunction, false); 
    } else if (element.attachEvent) { 
     element.attachEvent('on' + event, callbackFunction); 
    } 
}; 

function isScrolledIntoView(el) { 
    var theTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; 
    var elemTop = el.getBoundingClientRect().top; 
    var elemBottom = el.getBoundingClientRect().bottom; 

    var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight); 
    if(isVisible) { window.reCaptchaPos = theTop; } 
    return isVisible; 
} 

window.onscroll = function() { isScrolledIntoView(document.getElementById('reCaptcha_')); }; 

focusWhatever = function (response) { 
      if(window.reCaptchaPos) { $("html, body").scrollTop(window.reCaptchaPos); } 
    }; 
</script> 

にスクロール

このアプローチは、iOSデバイスのビューポート内でreCAPTCHAの垂直方向の位置を調整した方が効果的です。