onsubmit（）会触发，但不会更改手机上的元素样式

-1

我想在用户提交表单时在屏幕上显示模式窗口。我想禁用的形式（表现出一定加载图标）来显示该按钮被点击并正在处理动作，因为有时候在移动它不是我们的用户很清楚onsubmit（）会触发，但不会更改手机上的元素样式

在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); 
}

来源

2015-09-04 GigaKatowice

您在第3行有错字，在“阻止”之前缺少“'” –

感谢您的注意，但这只是我的问题中的错字。当您在移动设备上提交时， – GigaKatowice

是否会重新加载页面？ –

从@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（）函数，推迟提交操作。它是一些移动优化还是什么？谢谢大家的帮助！

来源

2015-09-07 14:07:40 GigaKatowice

-1

你应该把.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>

来源

2015-09-04 11:22:46

但我想要表单提交。我想禁用表单（显示一些加载图标）以显示该按钮已被点击并且正在处理操作，因为有时在移动设备上，我们的用户不太清楚。 – GigaKatowice

它会在3秒后显示loadingPanel –

如何传递这个e参数？我比较新的JS – GigaKatowice

-1

请这个尝试停止形式。删除javascript并添加jquery函数。

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

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

来源

2015-09-04 11:26:55

我不想使用jQuery，除非它不可能在没有它的情况下工作 – GigaKatowice

为什么你要做减号？如果你不使用评论。 –

这不是我：D是否可以检查谁不喜欢帖子/评论？ – GigaKatowice

onsubmit（）会触发，但不会更改手机上的元素样式

回答

相关问题