如何在加载程序期间禁用背景正在显示答案

【问题标题】：How to disable background during loader is showing如何在加载程序期间禁用背景正在显示
【发布时间】：2017-02-08 11:48:57
【问题描述】：

当用户单击按钮时，我正在显示加载程序。以下是加载器类

.loader-box{ background:rgba(0,0,0,0.8); position:fixed; bottom:0; left:0; top:0; width:100%; height:100%; z-index:100;}

我的问题是当加载器显示时，用户可以使用标签移动光标并点击提交，如何防止这种情况发生？这可以使用任何 css 属性还是我需要做其他任何事情？

【问题讨论】：

除非您想在显示加载程序时通过 display:none 或类似方式删除提交按钮/其他相关元素 - 不，这不能单独使用 CSS 完成。您将需要一些 JavaScript 来暂时禁用这些元素。
为什么在显示加载器时不禁用按钮。或者更好的是让按钮调用的函数在执行前检查你是否完成了加载。
@CBroe 可以请你建议将禁用背景的 javascript 代码。

标签： html css loader

【解决方案1】：

我发布一个例子来帮助你。我们可以在使用 tab 键时使用“tabindex”属性来聚焦元素。

<div class="loader-box">
    <div class="formwrapper">
        <input type="text" name="name" tabindex="01" placeholder="text 01">
        <input type="text" name="name" tabindex="02" placeholder="text 02">
        <input type="text" name="name" tabindex="03" placeholder="text 03">
        <input type="button" name="button" tabindex="04" value="Submit">
    </div>
</div>

<style type="text/css">
    .loader-box { 
        background:rgba(0,0,0,0.8); 
        position:fixed; 
        bottom:0; 
        left:0; 
        top:0; 
        width:100%; 
        height:100%; 
        z-index:100;
    }
    .formwrapper {
        font-family: arial;
        width: 200px;
        height: 200px;
        margin:auto;
        position:fixed; 
        bottom:0; 
        left:0; 
        top:0;
        right: 0; 
        text-align: center;
        color: #000;
        background: #c1c1c1;
        border-radius: 10px;
    }
    input {
        padding: 5px;
        width: 80%;
        margin:8px 10px;
    }
</style>

【讨论】：

【解决方案2】：

您可以启用/禁用输入：

     $("#...").attr('disabled','disabled'); // disable
     $("#...").removeAttr('disabled'); //enable

例子：

http://jsfiddle.net/juvian/R95qu

【讨论】：

【解决方案3】：

将你的加载器放到一个填充页面的 div 中：

#loaderParent{
position: fixed;
width:100vw;
height:100vh;
}

或者，如果您在显示/隐藏此 div 时遇到问题，请让加载程序本身填充页面：

 .loader-box{
     position: fixed;
     width:100vw;
     height:100vh;
 }

为了防止键盘：

  $(document).keydown(function () { return false; });

在加载器褪色后将其改回：

 $(document).keydown(function () { return true; });

一个样本：

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<input type="button" value="Test Tab" />
<input type="button" value="Test Tab" />
<input type="button" value="Test Tab" /><br><br>
<input type="button" value="Disable KeyDown" onclick="DisableKeyDown()" />





<script>
  function DisableKeyDown(){
       $(document).keydown(function () { return false; });
       }
</script>

【讨论】：

最多会阻止用户点击 - 但不会阻止键盘导航。
我的问题是当加载器显示时，用户可以使用选项卡移动光标并点击提交，我认为加载器工作时他不需要键盘导航。
我认为“by using tabs”是指键盘导航。
是的当然通过使用标签意味着键盘导航，但这是他想要阻止的事情。
是的，这就是我的观点：您的回答没有提供任何会阻止表单内的键盘导航发生的事情。将一个元素覆盖在所有其他元素之上可能会停止鼠标点击，但它对键盘导航没有任何作用。