表单提交时显示 div，适用于 Chrome、FF、IE 但不适用于 Safari答案

【问题标题】：show div upon form submit, works in Chrome, FF, IE but not Safari表单提交时显示 div，适用于 Chrome、FF、IE 但不适用于 Safari
【发布时间】：2012-03-29 23:01:18
【问题描述】：

不知道该去哪里。

我有一个表单，提交时我想显示“处理中，请稍候”消息。（表格有照片要上传，所以可能需要一段时间）

我有以下 jQuery

$(document).ready(function() {
    $('#addnews').submit(function() {
        $('#loading').show();
    });
});

addnews 是我的表单 ID，我模板中的 div 是

<div id="loading">Please wait, your news is being submitted...
    <img src="/-/images/addwalk-loader.gif"/>
</div>

使用这个 css

#loading{
    display:block;
    display: none;
    background:#399f8a;
    color:#FFFFFF;
    font-weight: bold;
    text-align: center;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    padding:10px;
    margin-top: 10px;
}

.loading img{
    float: right;
}

现在，当我在 FF(Mac)、Chrome(Mac&PC) 和 IE9 中点击提交时，这可以正常工作（虽然 gif 没有动画，但我知道这是一个单独的问题）

但它似乎不想在 mac 上的 Safari 上工作。任何想法，如果我有什么东西阻止它？或者调试它的最佳方法是什么？谢谢！

【问题讨论】：

我正在使用 safari 5.1.3，它似乎可以正常工作 jsfiddle.net/dhirajbodicherla/MF7J5/3 如果我错过了什么，请告诉我。
不，Fiddle 看起来是对的。奇怪的。我使用的表单是 Safecracker 表单，作为 Expression Engine 的一部分，尽管我认为这不会导致问题。我在 5.1.5。使用开发>用户代理时 - 它适用于所有浏览器，包括 Safari (Mac) 和 iOS Safari（我知道），但其他所有浏览器都很好。只是 Safari！
理想情况下，安全破解器应该不会造成任何问题，您是否在您的萤火虫控制台中看到任何奇怪的错误？
这就是问题所在，我不太清楚如何检查错误？（对此非常新！）奇怪的是，在我多次测试过它时，它偶尔会在几秒钟后弹出，但肯定不会像在其他浏览器中那样单击“提交”后立即弹出！
刚刚检查了 iPad 上的 Safari，它也可以在那里工作！呸！开始认为这可能是 5.1.5 的错误，因为它是唯一没有显示它的浏览器！

标签： jquery forms safari

【解决方案1】：

我遇到了一些非常相似的问题，在提交付款表单时，我们显示了一个覆盖整个屏幕的加载弹出窗口，以试图阻止人们重新加载页面并在他们认为花费太长时间时重新提交。然而，在 Safari 中，加载程序似乎从未出现过。

在稍微观察控制台寻找线索后，我意识到所有的 css 更改都在发生并被应用到页面，但是我根本没有看到这些反映在屏幕上。

我得出的结论是，这是由于 Safari 在页面加载期间处理内容呈现的方式。一旦触发页面加载（即从链接或表单提交），Safari 将停止对显示进行任何进一步的更改。

这意味着您需要在触发提交之前准备好加载动画。将这种想法应用到我自己的代码中解决了这些问题。

对你来说，这意味着这样的事情......

$(document).ready(function() {
    $('#addnews').submit(function(e) {
        e.preventDefault();
        $('#loading').show();
        $(this).submit();
    });
});

然而，这引发了另一个问题，因为提交是触发事件，而我们想要触发的事件我们创建了一个无限循环，由于我们阻止了默认设置，因此永远不会提交。

要解决这个问题，您要么不需要触发提交的所有内容，要么我们可以做这样的事情......

$(document).ready(function() {
    $('#addnews').each(function(){
        this.preventNextSubmit = true;            
    }).submit(function(e) {
        if(this.preventNextSubmit == true){
            this.preventNextSubmit = false;
            e.preventDefault();
            $('#loading').show();
            $(this).submit();
        }
    });
});

此示例最初将一个布尔值添加到设置为 true 的表单中。如果它是真的，它会抑制表单提交并显示动画，然后它会重置布尔值并再次调用提交，现在将正常提交。

我希望这会有所帮助:)

【讨论】：

【解决方案2】：

这对我有用。真的不知道为什么，但也许 Safari 需要一点休息才能在提交之前真正显示它:) 提交似乎会停止页面上的一些事件。动画 GIF 在 Safari 和 IE 上提交时会冻结，但在 Chrome 和 FF 中，它们仍会在提交过程中滚动。

$(document).ready(function() {
    $('#addnews').submit(function() {
        setTimeout(gogo,1);    
    });
});

function gogo() {
    $('#loading').show();
}

【讨论】：

酷，我马上试试！

【解决方案3】：

似乎这是一个问题，需要您在提交发生之前准备您希望它处于的页面状态。因此，如果您不太喜欢带有type='submit' 按钮的表单，那么这里是正确的解决方案：

第一步

将您的 submit 按钮更改为普通按钮。

第 2 步

<input type="button" class=".fake_submit" value="Submit" />

像这样绑定显示叠加层的函数：

$(".fake_submit").click(function(){
      $('.overlay').fadeIn(function(){
    $(form).submit();
   });
});

匿名函数的淡入就像一个时间延迟，所以当表单真正淡入时，覆盖的状态就已经设置好了。这对我有用。

奖金提示

如果你想要某种动画，Safari 似乎会阻止 gifs 做他们天生要做的事情。也许是一个错误，或者 Apple 人认为在即将发布的页面上浪费资源是没有意义的。不管是什么原因，他们似乎没有在其中包含动画。因此，您可以使用 CSS3 动画加载器代替 gif，在桌面版 Safari 中，这似乎仍然有效。你可以在这里找到一个很酷的动画：

http://fortawesome.github.io/Font-Awesome/examples/#animated

【讨论】：