Question

我认为我的情况有点奇怪......我的表格已经过Google Recaptcha验证。提交按钮被禁用，直到使用数据回调和一些JS与recaptcha进行交互。我只是在我的iOS设备上使用Safari浏览器尝试我的网站，我做了Recaptcha验证，并且出现了绿色检查，就像正常一样。然后当我滚动时，表单所在的容器div消失了，然后整个表单变灰了。它似乎落后于网站背景。

这是错误的屏幕截图：

所以，至少可以说我很困惑。我在搜索过程中找不到任何类似的问题。表单与PHP集成，这是代码：

<?php
if (isset($_REQUEST['email'])) {
  if ($_SERVER["REQUEST_METHOD"] === "POST") {
    $recaptcha_secret = "my_secret_key_was_here";
    $response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$recaptcha_secret."&response=".$_POST['g-recaptcha-response']);
    $response = json_decode($response, true);

    if ($response["success"] === true) {
      $to = "someemail@example.com";
      $subject = "Contact Form";
      $firstname = $_REQUEST['firstname'];
      $lastname = $_REQUEST['lastname'];
      $email = $_REQUEST['email'];
      $comments = $_REQUEST['comments'];

      $message = "First Name: \t";
      $message .= $firstname;
      $message .= "\n";
      $message .= "Last Name: \t";
      $message .= $lastname;
      $message .= "\n";
      $message .= "Email: \t";
      $message .= $email;
      $message .= "\n";
      $message .= "Message: \t";
      $message .= $comments;
      $message .= "\n";

      mail($to, $subject, $message, "From:" . $email);
      header("Location: sent.html");
    } else {
      header("Location: failed.html");
    }
  }
} else {
  ?>

else打开页面HTML，如果不满足条件则显示页面。这是我的剧本：

$(document).ready(function() {
  $('#submitbutton').prop( "disabled", true ).attr('title', "Please check the catchpa before submitting the form");
});

var enableBtn = function() {
  $('#submitbutton').prop( "disabled", false ).attr('title', "Submit");
}

这是我的表单HTML：

    <form method="post" action="new.php">

      <label for="firstname">First Name:</label>
      <input name="firstname" required type="text" />

      <label for="lastname">Last Name:</label>
      <input name="lastname" required type="text" />

      <label for="email">Email Address:</label>
      <input name="email" required type="email" />

      <label for="comments">Message:</label>
      <textarea name="comments" required></textarea>

      <div class="center-captcha">
        <div class="g-recaptcha" data-sitekey="my_site_key_was_here" data-callback="enableBtn"></div>
      </div>

      <button class="send-button" id="submitbutton">Submit</button>
    </form>

非常感谢任何帮助。

Answer 1

用这个帖子给出的答案解决了这个问题： Fixed positioning/z-index issue in mobile safari

显然我的背景被翻译到页面的前面，覆盖了表单输入和其他内容。

添加此行修复了它：

-webkit-transform: translate3d(0,0,0);

Google Recaptcha在iOS Safari浏览器上做了一些奇怪的事情

1 个答案: