Question

我在用户点击按钮时显示加载程序。以下是装载程序类

.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属性还是我还需要做其他事情？

Answer 1

将您的加载程序放到填充页面的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>

Answer 2

您可以启用/禁用输入：

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

示例：

http://jsfiddle.net/juvian/R95qu

Answer 3

我发贴了一个例子来帮助你。使用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>

如何在加载程序中禁用背景显示

3 个答案: