如何在点击后禁用按钮，即使用户刷新网页？

我设计了一个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

如何在点击后禁用按钮，即使用户刷新网页？

回答

相关问题