如何在點擊後禁用按鈕，即使用戶刷新網頁？

我設計了一個HTML 5 + JavaScript手機網頁。在我的頁面中，我有一個名爲「submit」的按鈕。當我點擊它時，按鈕的值將變成「完成」。但是，如果我點擊「提交」按鈕後刷新了我的頁面，則會出現按鈕（「提交」）的默認值。如何在點擊後禁用按鈕，即使用戶刷新網頁？

我需要的是一旦我點擊那個按鈕，它的值應該只有「完成」，即使用戶刷新他的頁面。有沒有具體的方法來做到這一點？

<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>

來源

2013-07-19 jmj

您不能僅通過客戶端代碼完成此操作。你可以用localStorage做一些類似的工作，但是這個工作直到用戶在客戶端清除它。 –

去和谷歌localStorage.getItem或localStorage.setItem :)這可能是一個想法，以安全的按鈕的實際狀態。 –

按鈕應該有多久標籤'完成'？如果用戶關閉窗口並重新打開頁面，會發生什麼？ –

您可以在cookie中存儲關於是否點擊按鈕的信息。您可以使用javascript設置和讀取此cookie，並在Cookie存在或具有特定值時禁用按鈕。這很容易欺騙，用戶可以刪除或修改cookie。如果您需要它更可靠，則需要將其存儲在服務器端。

來源

2013-07-19 12:48:24

存儲服務器端也需要一個cookie。刪除cookie意味着丟失有關用戶/會話的信息。所以它不是更可靠。 –

@ t.niese那麼，你可以存儲用戶代理和/或用戶IP，比你不需要cookie。但我必須同意它仍然是可以合作的，除非全功能登錄（用戶會話）系統得到實施。 –

謝謝你們。然後我會嘗試將其存儲在服務器端。 – jmj

嘗試

使用一個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'; 
    } 
}

來源

2013-07-19 12:50:24

那麼重新加載隱藏的字段也會有它的默認值了。某些瀏覽器在重新加載時保留輸入字段的統計信息（我不知道隱藏字段是否也是如此），但不是全部。 –

它不工作阿倫 – jmj

可以使用localStorage存儲按鈕的值並在用戶重新啓動網頁時加載它。

btn.innerHTML=localStorage.btn_value 


Btn.onclick = function() 
{ 
this.innerHTML='Done'; 
localStorage.btn_value=this.innerHTML; 
}

這應該工作...

來源

2013-07-19 12:54:16

將按鈕創建'DOM支持localstorage？ – jmj

@jmj'localStorage' _is_更強大的'cookie'。你可以查看更多的信息：http://diveintohtml5.info/storage.html –

@jmj localStorage是一個簡單的商店，它不關心DOM。而Button代碼本身使用localStorage。 – Zlatko

你可以制定出這樣的（半）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'; 
}

現在，這一部分，我們稱之爲，按鈕初始化 - 它會檢查哈希值。假設你用Javascript初始化你的按鈕。

Button.init = function { // or onPageLoad or whatever 
    if('#done' == window.location.hash) { 
    Button.setLabel('Done'); // or variation thereof 
    } 
};

編輯：剛纔看到你已經初始化函數：DX，所以改變線Btn.innerHTML = 'Submit';到 if('#done' == window.location.hash) { Btn.innerHTML = 'Done'; } else { Btn.innerHTML = 'Submit'; }

當然，如果你已經不使用哈希，你需要一個if或者包括兩個:)

來源

2013-07-19 13:01:41 Zlatko

會話存儲如何？該按鈕將顯示「完成」，直到用戶關閉窗口或標籤

<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>

來源

2013-07-19 13:14:52 sabof

如何在點擊後禁用按鈕，即使用戶刷新網頁？

回答

相關問題