Safari 的网页表现不同

Question

以下 html 代码是简化版本，用于演示在 ipad 或 iphone 上使用 Safari 时出现的问题。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
     <head>
         <meta charset="utf-8" />
         <title>Testing</title>
         <script type="text/javascript">
                                function getstuff()
                                {
document.dataentry.tandc.blur();
<!-- Show the Continue button now -->
document.getElementById("open").hidden="";
ff.style.display='block';
                           document.dataentry.sb.focus();
}
</script>
         </head>
         <body>
<div class="span8">
<div class="row">
<div class="box">
<h3>Sign Up To Access Wi-Fi</h3>
<!-- Not going via Facebook -->
<form name="dataentry" action="http://www.cavreporter.com.au:90/Portal/DoNothing.php" method="post">
     <div class="field" align="left">
     <span><input type="text" name="fn" placeholder="Name" /></span>
     </div>
     <div class="field" align="left">
     <span>
     <input type="email" name="em" id="txtEmail" placeholder="Email Address" />
     </span>
     </div>
     <div class="field" align="left">
     <span>Subscribe: <input type="checkbox" name="sb" /></span>
     <label>
     <h5>By ticking subscribe you agree to receive information</h5>
     </label>
     <input name="tc" type="hidden" />
     <button class="button" style="text-decoration: underline;" name="tandc" type="submit" onclick="getstuff()">Sign Up</button>
     </div>
</form>
</div>
</div>
</div>
<!-- This is the "Enter" button for "Open" networks. -->
<div style="display:none;" id="ff">
<!-- This is the "Enter" button for "Open" networks. -->
<div class="span8">
<div class="row">
<div class="box">
<strong>By clicking Continue, you agree.</strong>
<form action="$authaction" method="get">
     <input name="tok" type="hidden" value="$tok" />
     <input name="redir" type="hidden" value="$redir" />
     <button class="button" style="text-decoration: underline;" id="open" hidden="hidden" type="submit">Continue</button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>

该代码显示几个文本字段和一个按钮，而另一个按钮目前对用户隐藏。在文本字段中输入信息后，单击按钮，现在会出现另一个按钮。在 Safari 设备上使用它时，第二个按钮按预期出现，然后几乎立即使用操作语句中 php 例程的地址加载新页面。使用其他浏览器时，页面未加载，按钮按预期显示。

我只是在滥用 HTML 标准，还是 Safari 需要更多东西，因为我不希望它加载页面。

可在 www.cavreporter.com.au:90/fu.html

找到这方面的示例

Answer 1

因为您的按钮有 type="submit"，所以正在发布表单。

所以你可以像这样简单地改变你的按钮：

<button class="button" style="text-decoration: underline;" name="tandc" type="button">Sign Up</button>

其中 type="button" 而不是 type="submit"

最好在您的第一个 form 上也捕获 submit 事件以防止意外提交。

Safari 的网页表现不同

Web page behaves differently for Safari

html

safari

ios