即使用戶刷新網頁，如何在單擊按鈕后仍禁用按鈕？
[英]How to disable a button after clicking it eventhough user refreshes the webpage?
問題描述
我設計了一個HTML 5 + JavaScript移動網頁。 在我的頁面中，我有一個名為“提交”的按鈕。 當我單擊它時，按鈕的值將更改為“完成”。 但是，如果我在單擊“提交”按鈕后刷新頁面，則會顯示button（“提交”）的默認值。
我需要的是，一旦單擊該按鈕，即使用戶刷新了頁面，它的值也應該只是“完成”。 有什么具體方法可以做到嗎？
<style>
.selectBtn{height:60px;width:80px;
background-color:yellow;}
#abc{background-color:gray;height:100%;width:60%;}
</style>
</head>
<body><div id='abc'></div>
<script>
content = document.getElementById('abc');
function dx(){
var Btn = document.createElement('button');
Btn.type = 'button';Btn.className = 'selectBtn';
Btn.innerHTML = 'Submit';
Btn.onclick = function()
{
this.innerHTML='Done';
}
content.appendChild(Btn);
}
dx();
</script>
5 個解決方案
解決方案1
0 已采納 2013-07-19 12:48:24
您可以在cookie中存儲有關是否單擊按鈕的信息。 您可以使用javascript設置和讀取此cookie，並在cookie存在或具有特定值的情況下禁用按鈕。 這很容易進行，用戶可以刪除或修改cookie。 如果您需要使其更可靠，則需要將其存儲在服務器端。
解決方案2
0 2013-07-19 12:50:24
嘗試
單擊一個按鈕后，使用一個hiddenfield並將值設置為true，並且當用戶刷新頁面加載時，如果該值設置為true，則會觸發頁面加載，將按鈕名稱更改為完成
Btn.onclick = function()
{
this.innerHTML='Done';
var hdnvalue=document.getElementById("hiddenfield1");
hdnvalue.value="true";
}
function pageload()
{
var hdnvalue=document.getElementById("hiddenfield1");
if(hdnvalue=="true")
{
Btn.innerHTML='Done';
}
}
解決方案3
0 2013-07-19 12:54:16
您可以使用localStorage來存儲按鈕的值，並在用戶重新啟動網頁時加載它。
btn.innerHTML=localStorage.btn_value
Btn.onclick = function()
{
this.innerHTML='Done';
localStorage.btn_value=this.innerHTML;
}
這應該工作...
解決方案4
0 2013-07-19 13:01:41
您可以為此設計一種（半）HTML5方法。
當您單擊按鈕時，還要更改URL。 然后，您可以在服務器上將按鈕的值設置為“完成”。 或者您的服務器端代碼可以忽略此問題，然后使用JS對其進行修復。
純JavaScript解決方案：首先-更改提交時的哈希。
Btn.onclick = function () {
// do Ajaxy submit here
MyFramework.Ajax.submit();
// now alter the hash
// also, you could also move this in the ajax callback function
// - to make sure the submit worked.
window.location.hash = 'done';
}
現在，我們將其稱為按鈕初始化-它檢查哈希值。 假設您使用Java腳本初始化了按鈕。
Button.init = function { // or onPageLoad or whatever
if('#done' == window.location.hash) {
Button.setLabel('Done'); // or variation thereof
}
};
編輯：剛剛看到您已經具有init函數： dx ，因此更改行Btn.innerHTML = 'Submit'; 到if('#done' == window.location.hash) { Btn.innerHTML = 'Done'; } else { Btn.innerHTML = 'Submit'; } if('#done' == window.location.hash) { Btn.innerHTML = 'Done'; } else { Btn.innerHTML = 'Submit'; }
當然，如果您已經使用過哈希，則需要包含一個或兩個:)
解決方案5
0 2013-07-19 13:14:52
會話存儲如何？ 該按鈕將顯示“完成”，直到用戶關閉窗口或選項卡
<style>
.selectBtn{height:60px;width:80px;
background-color:yellow;}
#abc{background-color:gray;height:100%;width:60%;}
</style>
</head>
<body><div id='abc'></div>
<script>
content = document.getElementById('abc');
function dx(){
var Btn = document.createElement('button');
Btn.type = 'button';
Btn.className = 'selectBtn';
Btn.innerHTML = 'Submit';
Btn.onclick = function() {
this.innerHTML='Done';
sessionStorage.done = true;
}
if (sessionStorage.done) {
Btn.innerHTML = 'Done';
}
content.appendChild(Btn);
}
dx();
</script>
單擊后如何在固定的時間間隔內禁用單選按鈕？
[英]How to disable the radio button for a fixed interval of time after clicking them?
單擊后如何在固定的時間間隔內禁用單選按鈕
[英]How to disable the radio button for a fixed interval of time after clicking them
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.