Question

我正在使用基于i frame的机制来提交我的登录，并且它在除Safari（5.1.7）之外的每个浏览器上都能正常工作。这是我用来提交信息的HTML表单

<form:form action="${loginActionUrl}" method="post" commandName="loginForm" id="header-signin" target="loginFrame" name="header-signin">
  <input type="text"    name="j_username" id="header-signin_j_username"> 
  <input type="password" name="j_password" id="header-signin_j_password"> 
  <input type="button" class="btn1" value="Sign In" id="login" formnovalidate="formnovalidate" onclick="JavaScript:triggerSigin('header-signin');" />
</form:form>

以下是我用来使用JQuery提交表单的脚本

document.getElementById('header-signin_j_password').onkeydown = function(event) {
    if (event.keyCode == 13) {  
        triggerSigin(this.form.id);
   }
}

function triggerSigin(formID){
    if(validateSigninForm(formID)){
        $( "#"+formID).submit();
    }
}

一切都很简单，没有任何复杂的逻辑，我已经在所有可用的浏览器上测试了它并且工作正常，但在Safari上，它表现得非常奇怪

如果我在输入密码后点击了输入按钮，登录过程就完全正常了。
如果我填写每个字段并单击登录按钮，Safari将打开一个新选项卡，表单将提交给服务器，username和password字段为null。如果我关闭额外的窗口并再次单击登录按钮，一切正常，直到我退出并再次尝试登录系统。

我不确定为什么Safari会打开一个新的浏览器窗口以及为什么表单数据被提交为null，这种行为只是第一次发生，随后点击签名按钮工作得很好，直到我关闭浏览器并再次打开它。任何人都可以帮助我理解这个问题

最终输出

<iframe height="0" width="0" frameborder="0" scrolling="no" name="loginFrame" hidden="true"> </iframe>
<form id="header-signin" name="header-signin" action="https://localhost/customer_login" method="post" target="loginFrame">
<div class="field-container">
    <label for="username">User Name</label> 
    <input type="text" name="j_username" id="header-signin_j_username"> 
  </div>
  <div class="field-container">
    <label for="password">Password</label>
     <input type="password" name="j_password" id="header-signin_j_password"> <a href="/login/pw/request/external" class="forgot">Forgot password?</a>
   </div>
    <input type="submit" class="btn1" value="Sign In" id="login" formnovalidate="formnovalidate" onclick="JavaScript:return validateSigninForm();">
</form>

我不确定

当我按下输入按钮时，为什么这在Safari中有用？为什么在点击按钮时它无效。
这个问题适用于第一次点击，一旦我关闭另一个窗口并再次点击登录按钮，Safari中的一切工作正常。

Answer 1

使用button标记代替输入标记。

另外，在CSS中添加以下行：

button {-webkit-appearance: none;}

或继续使用输入标记并添加以下行：

input {-webkit-appearance: none;}

它应该可以正常工作。

Answer 2

您发布的代码似乎不是原因。 jsFiddle：http://jsfiddle.net/zen963fo/（我添加了自己的validateSigninForm()以使发布的代码有效）

您可以分享validateSigninForm()功能吗？也许它就在那里。

我还制作了JS的简化版http://jsfiddle.net/zen963fo/2/，可以通过简化您的问题来解决您遇到的一些问题提交过程。

Answer 3

我不确定这是否可以回答您的问题。如果您在Safari中启用了开发人员工具，请尝试将其禁用，然后重试。

请参阅此链接https://discussions.apple.com/thread/2754821?tstart=0

尝试使用iframe提交表单时Safari上的奇怪行为

最终输出

3 个答案: