如何在加載程序中禁用背景顯示

我在用戶單擊按鈕時顯示加載程序。以下是裝載機類如何在加載程序中禁用背景顯示

.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屬性，或者我需要做其他事情嗎？

來源

2017-02-08 C.jacking

除非你想通過顯示刪除提交按鈕/其他相關元素：none或類似的，而你的加載器顯示 - 不，這不能單獨使用CSS來完成。您將需要一些JavaScript來臨時禁用這些元素。 – CBroe

爲什麼不在顯示加載程序時禁用按鈕。或者甚至更好地讓按鈕調用的函數檢查執行前是否完成加載。 –

@CBroe可以üPLZ建議將禁用背景的JavaScript代碼。 –

把你的裝載機，填補了網頁一個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>

來源

2017-02-08 11:53:30

最多可以阻止用戶點擊 - 但它不會阻止鍵盤導航。 – CBroe

*我的問題是當加載程序顯示，然後用戶可以通過使用標籤移動光標，然後單擊提交也*，我不認爲他需要鍵盤導航時，加載程序正在工作。 –

我認爲_「通過使用製表符」_表示鍵盤導航。 – CBroe

可以啓用/禁用輸入：

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

實施例：

http://jsfiddle.net/juvian/R95qu

來源

2017-02-08 11:57:20

我發佈了一個示例來幫助你。當使用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>

來源

2017-02-08 12:05:04

如何在加載程序中禁用背景顯示

回答

相關問題