onsubmit() 触发但不改变移动设备上的元素样式答案

【问题标题】：onsubmit() fires but makes no changes to element style on mobileonsubmit() 触发但不改变移动设备上的元素样式
【发布时间】：2015-09-04 11:07:39
【问题描述】：

当用户提交表单时，我试图在屏幕顶部显示一个模式窗口。我想禁用表单（显示一些加载图标）以显示该按钮已被单击并且正在处理操作，因为有时在移动设备上它对我们的用户来说不是很清楚

在 PC 浏览器（Firefox、IE、Opera）上一切正常，但在 Android 或 WP 8.1 上，提交表单后不显示 div 覆盖。

您知道如何解决此问题吗？也许其他一些方法？

我的示例代码：

<script type="text/javascript">
        function ShowLoadingPanel() {
            document.getElementById('loadingPanel').style.display = 'block';
            document.getElementById('overlay').style.display = 'block'
        }
 </script>

<body>
 <div id="loadingPanel" class="loadingPanelStyle"></div>
 <div id="overlay" class="blackOverlay">    </div>
 <form id="form1" runat="server" onsubmit="return ShowLoadingPanel();">
    //some content
     <asp:Button runat="server" ID="xNext" Text="Next" OnClick="xNext_Click" />
 </form>
</body>

还有一些用于模态窗口的 CSS

.loadingPanelStyle
{
    display: none;
    position: fixed;
    background:url(../img/load2.gif) no-repeat center center;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    font-size: small;
    z-index: 1002;
    overflow: auto;
}

.blackOverlay
{
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 1001;
    -moz-opacity: 0.8;
    opacity: .80;
    filter: alpha(opacity=80);
}

【问题讨论】：

第 3 行有错字，“block”前缺少“'”
感谢您的关注，但这只是我的问题中的错字。
当您在移动设备上提交时页面是否会重新加载？
是的，它会重新加载，但模态表单甚至一分钟都没有显示。
它仍然无法在移动设备上运行，但也无法在 PC 浏览器上运行。

标签： javascript android html asp.net windows-phone-8

【解决方案1】：

在@Velimir Tchatchevsky 的一些提示之后，我找到了可行的解决方案。

function ShowLoadingPanel() {
        document.getElementById('loadingPanel').style.display = 'block';
        document.getElementById('overlay').style.display = 'block';

        setTimeout(function(){ 
            document.getElementById('form1').submit();
        }, 100);
        return false;
}

但奇怪的是，在 WP8.1（Internet Explorer）和 Android 4（默认浏览器）上，必须使用 setTimeout() 函数来推迟提交操作。是一些移动优化还是什么？谢谢大家的帮助！

【讨论】：

【解决方案2】：

请尝试一下。删除javascript并添加jquery函数。

$("#loadingPanel").show();

$("#overlay").show();

【讨论】：

我不想使用 jQuery，除非没有它就无法使用它
为什么要做减号标记？如果您不使用，请发表评论。
不是我 :D 是否可以检查谁不喜欢帖子/评论？
好的。伙伴，。没问题
没有。这是不可能的。

【解决方案3】：

你应该输入.preventDefault()来阻止表单提交

<script type="text/javascript">
            function ShowLoadingPanel(e) {
                e.preventDefault();
                document.getElementById('loadingPanel').style.display = 'block';
                document.getElementById('overlay').style.display = 'block'
                setTimeout(function(){ 
                    $(this).submit(); 
                }, 3000);
            }
     </script>

【讨论】：

但我想提交表单。我想禁用表单（显示一些加载图标）以显示该按钮已被单击并且正在处理操作，因为有时在移动设备上它对我们的用户来说不是那么清楚。
在显示 loadingPanel 3 秒后提交
这个e参数怎么传？？我对 JS 比较陌生
onsubmit="return ShowLoadingPanel(this);"