為了防止用戶多次提交表單我們可以有多種處理方法,以下做一些簡單的說明 1.通過css設置屬性 pointer-events: none; 這個屬性是css的特殊屬性,他更像是javaScript,它能: 阻止用戶的點擊動作產生任何效果 阻止預設滑鼠指針的顯示 阻止CSS里的 hover 和 acti ...
為了防止用戶多次提交表單我們可以有多種處理方法,以下做一些簡單的說明
1.通過css設置屬性 pointer-events: none;
這個屬性是css的特殊屬性,他更像是javaScript,它能:
- 阻止用戶的點擊動作產生任何效果
- 阻止預設滑鼠指針的顯示
- 阻止CSS里的
hover
和active
狀態的變化觸發事件 - 阻止JavaScript點擊動作觸發的事件
pointer-events屬性有很多值,但是對於瀏覽器來說,只有auto和none兩個值可用
2.通過disabled屬性禁止提交按鈕
<button type="button" disabled="disabled">Click Me!</button>
jq語法 設置 $("button").attr("disabled","true"); === $("button").attr("disabled","disabled");
移除 $("button").attr("disabled","false");===$("button").removeAttr("disabled");
3.通過設置定時器防止一定時間內連續點擊提交
btn.onclick = function oper(){
//執行一次 過3秒結束 才能點擊
btn.onclick = null;
clearTimeout(timer);
var timer = setTimeout(function(){
btn.onclick = oper;
},3000);
}
4.通過設置一個變數記錄提交次數
如果用戶已經單擊“提交”按鈕,該腳本會自動記錄當前的狀態,並將submitcount變數自加1,
當用戶試圖再次提交時,腳本判斷submitcount變數值非零,提示用戶已經提交,從而避免重覆提交表單。
var submitcount=0; function submitOnce (form){ if (submitcount == 0){ submitcount++; return true; } else{ alert("正在操作,請不要重覆提交,謝謝!"); return false; } }