Как изменить ширину reCaptcha (v2) с помощью js? - PullRequest
Новая
       30

Как изменить ширину reCaptcha (v2) с помощью js?

0 голосов
/ 08 июля 2019

Я пытаюсь установить ширину для reCaptcha (v2), но JavaScript не может найти div, к которому мне нужно применить стиль (<div class="rc-anchor rc-anchor-normal rc-anchor-light">).

Я пробовал Jquery, vanilla JS и их комбинацию, но ничего не помогло.В основном я пытался дать это div ID (document.getElementsByClassName("rc-anchor-normal")[0].setAttribute("id", "captchadiv");), но каким-то образом JS не может найти объект, если я не использую контрольный элемент на капче и сам не найду div.

У кого-нибудь есть идеи о том, как мне этого добиться?

Мой полный код 

var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var form = width - (width * 0.10);
var input = $("#name").outerWidth();

setTimeout(() => { document.getElementsByClassName("rc-anchor-normal")[0].style.width = input; }, 5000);

Ответы [ 3 ]

0 голосов
/ 08 июля 2019

Прямо из документов .Существует API, который позволяет вам настроить размер как компактный или нормальный.Атрибут называется data-size.Вот кодовый блок как его использовать: 

<script type="text/javascript">
  var onloadCallback = function() {
    grecaptcha.render('html_element', {
      'size' : 'compact'
    });
  };
</script>

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
    async defer>
</script>
0 голосов
/ 25 июля 2019

Единственное, что я нашел для меня - это масштабировать контент, а не captcha.

0 голосов
/ 08 июля 2019

попробуйте этот обходной путь: 

.g-recaptcha {
transform:scale(0.77);
transform-origin:0 0;
}

Обновление:

вы можете использовать параметр onload в URL: SRC = "https://www.google.com/recaptcha/api.js?onload=onloadCallback

<script type="text/javascript">
  var onloadCallback = function() {
    //set CSS
  };
</script>

Документы Google

...